/* ═══════════════════════════════════════════════════════════════════════════
   Ekam — Design Tokens v3
   Neutral-first canvas · one confident accent (Ekam indigo) · semantic status
   Every token name from v2 is preserved so existing pages inherit the update.
   Theme: light by default, dark via OS preference or [data-theme="dark"].
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* ── Surfaces & ink ──────────────────────────────────────────────────── */
  --surface:          #FFFFFF;   /* cards, inputs, popovers                */
  --surface-soft:     #F7F7F9;   /* app canvas                             */
  --surface-sunken:   #F0F0F3;   /* wells, segmented-control tracks        */
  --surface-raised:   #FFFFFF;   /* menus, dialogs (paired with shadow)    */
  --ink:              #0B0B12;   /* primary text — 19.6:1 on white         */
  --overlay:          rgba(11, 11, 18, 0.48);

  /* ── Brand: Ekam indigo (one action colour) ──────────────────────────── */
  --signature:        #4F46E5;   /* 6.3:1 on white — AA for text & UI      */
  --signature-50:     #EEF0FF;
  --signature-100:    #E0E3FF;
  --signature-200:    #C7CBFE;
  --signature-300:    #A5ACFC;
  --signature-400:    #818AF8;
  --signature-500:    #6366F1;
  --signature-600:    #4F46E5;
  --signature-700:    #4338CA;
  --signature-800:    #3730A3;
  --signature-glow:   rgba(79, 70, 229, 0.18);
  --signature-soft:   var(--signature-50);   /* was referenced, never defined */
  --signature-text:   #4338CA;               /* accent text on light bg       */
  --on-signature:     #FFFFFF;               /* text on filled accent         */

  /* ── Neutrals (cool zinc) ────────────────────────────────────────────── */
  --gray-50:          #F9F9FB;
  --gray-100:         #F2F2F5;
  --gray-200:         #E5E5EA;
  --gray-300:         #D2D2D9;
  --gray-400:         #9E9EAA;   /* icons / disabled only — not body text  */
  --gray-500:         #6B6B78;   /* secondary text — 5.3:1 on white        */
  --gray-600:         #4E4E5A;
  --gray-700:         #3A3A44;
  --gray-800:         #26262E;
  --gray-900:         #17171D;
  --gray-950:         #0B0B12;

  /* ── Status (soft = fill, text = AA-safe foreground) ─────────────────── */
  --success:          #12A150;
  --success-soft:     #DFF7E8;
  --success-text:     #0B6B37;
  --warning:          #E59A0B;
  --warning-soft:     #FEF3D6;
  --warning-text:     #8A5300;
  --danger:           #E5383B;
  --danger-soft:      #FDE5E5;
  --danger-text:      #B21F24;
  --info:             #2F7CF6;
  --info-soft:        #E1ECFE;
  --info-text:        #1A56C2;
  --accent:           #0BA5C7;
  --accent-soft:      #D9F5FB;
  --accent-text:      #0B6E86;

  /* ── Backgrounds (flat brand, subtle surfaces) ───────────────────────── */
  --gradient-brand:       var(--signature);
  --gradient-brand-soft:  var(--signature-50);
  --gradient-mesh:        var(--signature);
  --gradient-surface:     linear-gradient(180deg, #FFFFFF 0%, #F9F9FB 100%);
  --gradient-dark:        linear-gradient(180deg, #14141B 0%, #0B0B12 100%);
  --gradient-glow:        radial-gradient(circle, rgba(99, 102, 241, 0.14) 0%, transparent 70%);

  /* ── Lines ───────────────────────────────────────────────────────────── */
  --border:           #E5E5EA;
  --border-strong:    #D2D2D9;
  --hairline:         rgba(11, 11, 18, 0.06);

  /* ── Elevation (layered, low-opacity — reads premium, not heavy) ─────── */
  --shadow-xs:        0 1px 2px rgba(11, 11, 18, 0.05);
  --shadow-sm:        0 1px 2px rgba(11, 11, 18, 0.04), 0 1px 3px rgba(11, 11, 18, 0.06);
  --shadow-md:        0 2px 4px rgba(11, 11, 18, 0.04), 0 6px 16px rgba(11, 11, 18, 0.07);
  --shadow-lg:        0 4px 8px rgba(11, 11, 18, 0.04), 0 16px 40px rgba(11, 11, 18, 0.10);
  --shadow-xl:        0 8px 16px rgba(11, 11, 18, 0.06), 0 32px 72px rgba(11, 11, 18, 0.16);
  --shadow-glow:      0 0 0 4px rgba(79, 70, 229, 0.14);

  /* ── Focus (WCAG 2.2 — 2.4.11/2.4.13 visible, ≥3:1 indicator) ────────── */
  --focus:            #4F46E5;
  --focus-ring:       0 0 0 2px var(--surface), 0 0 0 4px var(--focus);

  /* ── Radius ──────────────────────────────────────────────────────────── */
  --r-xs:             6px;
  --r-sm:             8px;
  --r-md:             10px;   /* controls: buttons, inputs                 */
  --r-lg:             14px;   /* cards                                     */
  --r-xl:             20px;   /* panels, dialogs, hero media               */
  --r-full:           9999px;

  /* ── Spacing (4px base) ──────────────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --sb-expanded:      248px;
  --sb-collapsed:     64px;
  --topbar-h:         56px;
  --container:        1200px;
  --tap:              44px;    /* minimum touch target (WCAG 2.5.8 / HIG) */

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font:             'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:     'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:        'Geist Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;

  /* Type scale (1.2 minor third, fluid at the top end) */
  --text-xs:          12px;
  --text-sm:          13px;
  --text-base:        14px;   /* app body — dense but readable            */
  --text-md:          16px;   /* marketing body / mobile inputs (no zoom) */
  --text-lg:          18px;
  --text-xl:          20px;
  --text-2xl:         24px;
  --text-3xl:         clamp(26px, 2.2vw + 16px, 32px);
  --text-4xl:         clamp(32px, 3.4vw + 18px, 48px);
  --text-5xl:         clamp(40px, 5.2vw + 18px, 72px);
  --leading-tight:    1.12;
  --leading-snug:     1.35;
  --leading-normal:   1.55;
  --tracking-tight:   -0.025em;

  /* ── Motion (fast, purposeful) ───────────────────────────────────────── */
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1:            120ms;   /* hover / press                            */
  --dur-2:            200ms;   /* toggles, popovers                        */
  --dur-3:            320ms;   /* page-level reveals, drawers              */

  /* ── Legacy aliases — referenced across older templates but undefined ─ */
  --surface-primary:  var(--surface);
  --ink-primary:      var(--ink);
  --ink-light:        var(--gray-500);
  --card-bg:          var(--surface);
  --radius-md:        var(--r-md);
  --r-pill:           var(--r-full);
  --space-2xl:        var(--s-12);
  --red:              var(--danger);
  --emerald:          var(--success);
  --color-base-50:    var(--gray-50);
  --color-base-100:   var(--gray-100);
  --color-base-200:   var(--gray-200);
  --color-base-500:   var(--gray-500);
  --color-base-700:   var(--gray-700);
  --color-base-900:   var(--gray-900);
  --hub-primary:      var(--signature);
  --hub-primary-dark: var(--signature-700);
  --hub-border:       var(--border);
  --hub-hover:        var(--gray-100);
  --hub-text:         var(--ink);
  --hub-text-muted:   var(--gray-500);
  --hub-card-bg:      var(--surface);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dark mode — full parity. Duplicated on purpose: once for the OS preference
   (unless the user forced light), once for an explicit [data-theme="dark"].
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface:          #121218;
    --surface-soft:     #0B0B10;
    --surface-sunken:   #18181F;
    --surface-raised:   #1A1A22;
    --ink:              #F2F2F5;
    --overlay:          rgba(0, 0, 0, 0.6);

    --signature-50:     rgba(129, 138, 248, 0.10);
    --signature-100:    rgba(129, 138, 248, 0.16);
    --signature-200:    rgba(129, 138, 248, 0.24);
    --signature-glow:   rgba(129, 138, 248, 0.28);
    --signature-text:   #A5ACFC;
    --focus:            #A5ACFC;

    --gray-50:          #17171E;
    --gray-100:         #1F1F27;
    --gray-200:         #2C2C36;
    --gray-300:         #3D3D49;
    --gray-400:         #6E6E7C;
    --gray-500:         #A0A0AE;
    --gray-600:         #C4C4CF;
    --gray-700:         #DCDCE4;
    --gray-800:         #ECECF1;
    --gray-900:         #F6F6F9;
    --gray-950:         #FFFFFF;

    --success-soft:     rgba(34, 197, 94, 0.14);
    --success-text:     #5EE29A;
    --warning-soft:     rgba(245, 158, 11, 0.14);
    --warning-text:     #FBC456;
    --danger-soft:      rgba(239, 68, 68, 0.14);
    --danger-text:      #FF9B9D;
    --info-soft:        rgba(59, 130, 246, 0.14);
    --info-text:        #93BBFD;
    --accent-soft:      rgba(6, 182, 212, 0.14);
    --accent-text:      #6FE0F5;

    --border:           #26262F;
    --border-strong:    #353541;
    --hairline:         rgba(255, 255, 255, 0.06);

    --shadow-xs:        0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-md:        0 6px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg:        0 16px 40px rgba(0, 0, 0, 0.55);
    --shadow-xl:        0 32px 72px rgba(0, 0, 0, 0.65);
    --shadow-glow:      0 0 0 4px rgba(129, 138, 248, 0.22);

    --gradient-surface: linear-gradient(180deg, #121218 0%, #0B0B10 100%);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --surface:          #121218;
  --surface-soft:     #0B0B10;
  --surface-sunken:   #18181F;
  --surface-raised:   #1A1A22;
  --ink:              #F2F2F5;
  --overlay:          rgba(0, 0, 0, 0.6);

  --signature-50:     rgba(129, 138, 248, 0.10);
  --signature-100:    rgba(129, 138, 248, 0.16);
  --signature-200:    rgba(129, 138, 248, 0.24);
  --signature-glow:   rgba(129, 138, 248, 0.28);
  --signature-text:   #A5ACFC;
  --focus:            #A5ACFC;

  --gray-50:          #17171E;
  --gray-100:         #1F1F27;
  --gray-200:         #2C2C36;
  --gray-300:         #3D3D49;
  --gray-400:         #6E6E7C;
  --gray-500:         #A0A0AE;
  --gray-600:         #C4C4CF;
  --gray-700:         #DCDCE4;
  --gray-800:         #ECECF1;
  --gray-900:         #F6F6F9;
  --gray-950:         #FFFFFF;

  --success-soft:     rgba(34, 197, 94, 0.14);
  --success-text:     #5EE29A;
  --warning-soft:     rgba(245, 158, 11, 0.14);
  --warning-text:     #FBC456;
  --danger-soft:      rgba(239, 68, 68, 0.14);
  --danger-text:      #FF9B9D;
  --info-soft:        rgba(59, 130, 246, 0.14);
  --info-text:        #93BBFD;
  --accent-soft:      rgba(6, 182, 212, 0.14);
  --accent-text:      #6FE0F5;

  --border:           #26262F;
  --border-strong:    #353541;
  --hairline:         rgba(255, 255, 255, 0.06);

  --shadow-xs:        0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-md:        0 6px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg:        0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-xl:        0 32px 72px rgba(0, 0, 0, 0.65);
  --shadow-glow:      0 0 0 4px rgba(129, 138, 248, 0.22);

  --gradient-surface: linear-gradient(180deg, #121218 0%, #0B0B10 100%);
}