/* ============================================================
   ContentSERP V2 — DESIGN TOKENS (single source of truth)
   Do not scatter colors/spacing elsewhere. Use these tokens.
   ============================================================ */
:root {
    /* ── Color ─────────────────────────────────────────── */
    --cs-navy:          #0c1120;
    --cs-navy-2:        #111827;
    --cs-primary:       #4f46e5;
    --cs-primary-hover: #4338ca;
    --cs-primary-soft:  #eef2ff;

    --cs-bg:            #f1f5f9;
    --cs-surface:       #ffffff;
    --cs-surface-muted: #f8fafc;

    --cs-text:          #0f172a;
    --cs-text-secondary:#475569;
    --cs-text-muted:    #94a3b8;

    --cs-border:        #e2e8f0;
    --cs-border-strong: #cbd5e1;

    --cs-success:       #10b981;
    --cs-warning:       #f59e0b;
    --cs-danger:        #ef4444;
    --cs-info:          #0ea5e9;

    --cs-success-soft:  #ecfdf5;
    --cs-warning-soft:  #fffbeb;
    --cs-danger-soft:   #fef2f2;
    --cs-info-soft:     #f0f9ff;

    /* ── Typography ────────────────────────────────────── */
    --cs-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cs-font-size-xs:  12px;
    --cs-font-size-sm:  13px;
    --cs-font-size-md:  14px;
    --cs-font-size-lg:  16px;
    --cs-font-size-xl:  18px;
    --cs-font-size-2xl: 22px;

    --cs-line-height-tight:   1.25;
    --cs-line-height-normal:  1.5;
    --cs-line-height-relaxed: 1.7;

    /* ── Spacing ───────────────────────────────────────── */
    --cs-space-1:  4px;
    --cs-space-2:  8px;
    --cs-space-3:  12px;
    --cs-space-4:  16px;
    --cs-space-5:  20px;
    --cs-space-6:  24px;
    --cs-space-8:  32px;
    --cs-space-10: 40px;
    --cs-space-12: 48px;

    /* ── Radius ────────────────────────────────────────── */
    --cs-radius-sm: 6px;
    --cs-radius-md: 10px;
    --cs-radius-lg: 14px;

    /* ── Shadow ────────────────────────────────────────── */
    --cs-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --cs-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --cs-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.18);

    /* ── Layout ────────────────────────────────────────── */
    --cs-sidebar-width:           248px;
    --cs-sidebar-collapsed-width: 64px;
    --cs-content-max-width:       1200px;
    --cs-topbar-height:           56px;
}