/*
 * AI LOOMS — DESIGN TOKENS v2
 * 3-layer token architecture: Primitive → Semantic → Component
 *
 * USAGE
 * ─────
 * Layer 1 (Primitive) — raw palette. Never consume directly in components.
 * Layer 2 (Semantic)  — role-based aliases. Use these in all components.
 * Layer 3 (Component) — scoped composition. Use for specific UI elements.
 *
 * FONTS (load before using)
 * <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500;600&display=swap" rel="stylesheet">
 */


/* ═══════════════════════════════════════════════════════════
   LAYER 1 — PRIMITIVE SCALES
   Raw palette values. Reference only from Layer 2.
════════════════════════════════════════════════════════════ */
:root {

  /* ── Emerald (Brand) ─── 12-step scale ─────────────────── */
  --emerald-1:  #ecfdf5;   /* Subtlest surface tint         */
  --emerald-2:  #d1fae5;   /* Hover/active bg tint          */
  --emerald-3:  #a7f3d0;   /* Tinted border, subtle         */
  --emerald-4:  #6ee7b7;   /* Tinted border, emphasis       */
  --emerald-5:  #34d399;   /* Interactive border             */
  --emerald-6:  #10b981;   /* Brand solid — dark mode CTA   */
  --emerald-7:  #059669;   /* Hover on solid                 */
  --emerald-8:  #047857;   /* Active on solid                */
  --emerald-9:  #0b6e4f;   /* Brand solid — light mode CTA  */
  --emerald-10: #065f46;   /* Hover light mode               */
  --emerald-11: #064e3b;   /* Active light mode              */
  --emerald-12: #022c22;   /* Deepest — high-contrast text   */

  /* ── Slate (Neutral) ─── 11-step scale ─────────────────── */
  --slate-1:  #f8fafc;
  --slate-2:  #f1f5f9;
  --slate-3:  #e2e8f0;
  --slate-4:  #cbd5e1;
  --slate-5:  #94a3b8;
  --slate-6:  #64748b;
  --slate-7:  #475569;
  --slate-8:  #334155;
  --slate-9:  #1e293b;
  --slate-10: #0f172a;
  --slate-11: #020617;

  /* ── Rose (Danger) ──────────────────────────────────────── */
  --rose-2:   #ffe4e6;
  --rose-3:   #fecdd3;
  --rose-6:   #f43f5e;
  --rose-7:   #e11d48;
  --rose-8:   #be123c;

  /* ── Amber (Warning) ────────────────────────────────────── */
  --amber-2:  #fef3c7;
  --amber-3:  #fde68a;
  --amber-6:  #f59e0b;
  --amber-7:  #d97706;
  --amber-8:  #b45309;

  /* ── Sky (Info) ─────────────────────────────────────────── */
  --sky-2:    #e0f2fe;
  --sky-3:    #bae6fd;
  --sky-6:    #0ea5e9;
  --sky-7:    #0284c7;
  --sky-8:    #0369a1;

  /* ── Indigo (Secondary / Arch Design) ──────────────────── */
  --indigo-2: #e0e7ff;
  --indigo-3: #c7d2fe;
  --indigo-6: #6366f1;
  --indigo-7: #4f46e5;

  /* ── Orange (Target Role nav) ───────────────────────────── */
  --orange-2: #ffedd5;
  --orange-6: #f97316;
  --orange-7: #ea580c;

  /* ── Purple (Discovery nav) ─────────────────────────────── */
  --purple-2: #ede9fe;
  --purple-6: #8b5cf6;
  --purple-7: #7c3aed;

  /* ── Gold (Portfolio / Goals) ───────────────────────────── */
  --gold-2:   #fef3c7;
  --gold-6:   #c8a044;
  --gold-7:   #a6833a;
  --gold-8:   #84672e;
}


/* ═══════════════════════════════════════════════════════════
   LAYER 2 — SEMANTIC TOKENS  (light mode)
   Consume these in all components. Map to primitives only.
════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;

  /* ── Interactive (primary brand actions) ────────────────── */
  --color-interactive:          var(--emerald-9);   /* CTA bg, links          */
  --color-interactive-hover:    var(--emerald-10);  /* Hover                  */
  --color-interactive-active:   var(--emerald-11);  /* Pressed                */
  --color-interactive-fg:       #ffffff;            /* Text on interactive bg */
  --color-interactive-subtle:   var(--emerald-1);   /* Tint bg for ghost/hover*/
  --color-interactive-border:   var(--emerald-3);   /* Tinted border          */
  --color-interactive-text:     var(--emerald-9);   /* Colored text on surface*/

  /* ── Surfaces ───────────────────────────────────────────── */
  --color-canvas:               #ffffff;
  --color-surface:              var(--slate-1);     /* Page bg, sidebar bg    */
  --color-surface-raised:       var(--slate-2);     /* Cards, panels          */
  --color-surface-overlay:      #ffffff;            /* Dropdowns, modals      */
  --color-surface-inset:        var(--slate-3);     /* Recessed / pressed     */

  /* ── Borders ────────────────────────────────────────────── */
  --color-border-hairline:      var(--slate-2);     /* Subtlest dividers      */
  --color-border:               var(--slate-3);     /* Default component border*/
  --color-border-strong:        var(--slate-4);     /* Emphasized border      */
  --color-border-focus:         var(--emerald-9);   /* Focus ring color       */

  /* ── Text ───────────────────────────────────────────────── */
  --color-text:                 var(--slate-11);    /* Primary body copy      */
  --color-text-subtle:          var(--slate-6);     /* Secondary / muted      */
  --color-text-placeholder:     var(--slate-5);     /* Input placeholder      */
  --color-text-disabled:        var(--slate-4);     /* Disabled state         */
  --color-text-invert:          #ffffff;            /* On dark background     */
  --color-text-brand:           var(--emerald-9);   /* Brand-colored text     */

  /* ── Functional — Success ───────────────────────────────── */
  --color-success:              var(--emerald-6);
  --color-success-hover:        var(--emerald-7);
  --color-success-subtle:       var(--emerald-1);
  --color-success-border:       var(--emerald-3);
  --color-success-text:         var(--emerald-10);

  /* ── Functional — Danger ────────────────────────────────── */
  --color-danger:               var(--rose-6);
  --color-danger-hover:         var(--rose-7);
  --color-danger-subtle:        var(--rose-2);
  --color-danger-border:        var(--rose-3);
  --color-danger-text:          var(--rose-7);

  /* ── Functional — Warning ───────────────────────────────── */
  --color-warning:              var(--amber-6);
  --color-warning-hover:        var(--amber-7);
  --color-warning-subtle:       var(--amber-2);
  --color-warning-border:       var(--amber-3);
  --color-warning-text:         var(--amber-7);

  /* ── Functional — Info ──────────────────────────────────── */
  --color-info:                 var(--sky-6);
  --color-info-hover:           var(--sky-7);
  --color-info-subtle:          var(--sky-2);
  --color-info-border:          var(--sky-3);
  --color-info-text:            var(--sky-7);

  /* ── Severity / Status labels ───────────────────────────── */
  --sev-critical-bg:    var(--rose-2);       --sev-critical-text:  var(--rose-7);
  --sev-high-bg:        var(--amber-2);      --sev-high-text:      var(--amber-7);
  --sev-medium-bg:      var(--sky-2);        --sev-medium-text:    var(--sky-7);
  --sev-low-bg:         var(--slate-2);      --sev-low-text:       var(--slate-6);
  --sev-matched-bg:     var(--emerald-1);    --sev-matched-text:   var(--emerald-10);
  --sev-bonus-bg:       var(--purple-2);     --sev-bonus-text:     var(--purple-7);

  /* ── Nav item accents ───────────────────────────────────── */
  --nav-portfolio-color:   var(--sky-6);       --nav-portfolio-bg:  var(--sky-2);
  --nav-news-color:        var(--color-interactive); --nav-news-bg: var(--color-interactive-subtle);
  --nav-career-color:      var(--orange-6);    --nav-career-bg:     var(--orange-2);
  --nav-discovery-color:   var(--purple-6);    --nav-discovery-bg:  var(--purple-2);
  --nav-arch-color:        var(--indigo-6);    --nav-arch-bg:       var(--indigo-2);
}


/* ═══════════════════════════════════════════════════════════
   LAYER 2 — SEMANTIC TOKENS  (dark mode)
════════════════════════════════════════════════════════════ */
[data-theme="dark"],
.dark-mode {
  color-scheme: dark;

  --color-interactive:          var(--emerald-6);
  --color-interactive-hover:    var(--emerald-7);
  --color-interactive-active:   var(--emerald-8);
  --color-interactive-fg:       #ffffff;
  --color-interactive-subtle:   rgba(16,185,129,0.12);
  --color-interactive-border:   rgba(16,185,129,0.28);
  --color-interactive-text:     var(--emerald-4);

  --color-canvas:               var(--slate-10);
  --color-surface:              var(--slate-9);
  --color-surface-raised:       var(--slate-8);
  --color-surface-overlay:      var(--slate-9);
  --color-surface-inset:        rgba(0,0,0,0.30);

  --color-border-hairline:      rgba(255,255,255,0.05);
  --color-border:               var(--slate-8);
  --color-border-strong:        var(--slate-7);
  --color-border-focus:         var(--emerald-6);

  --color-text:                 var(--slate-1);
  --color-text-subtle:          var(--slate-4);
  --color-text-placeholder:     var(--slate-6);
  --color-text-disabled:        var(--slate-7);
  --color-text-invert:          var(--slate-11);
  --color-text-brand:           var(--emerald-4);

  --color-success:              var(--emerald-6);
  --color-success-hover:        var(--emerald-7);
  --color-success-subtle:       rgba(16,185,129,0.12);
  --color-success-border:       rgba(16,185,129,0.28);
  --color-success-text:         var(--emerald-4);

  --color-danger:               var(--rose-6);
  --color-danger-hover:         var(--rose-7);
  --color-danger-subtle:        rgba(244,63,94,0.14);
  --color-danger-border:        rgba(244,63,94,0.30);
  --color-danger-text:          #fda4af;

  --color-warning:              var(--amber-6);
  --color-warning-hover:        var(--amber-7);
  --color-warning-subtle:       rgba(245,158,11,0.14);
  --color-warning-border:       rgba(245,158,11,0.30);
  --color-warning-text:         #fcd34d;

  --color-info:                 var(--sky-6);
  --color-info-hover:           var(--sky-7);
  --color-info-subtle:          rgba(14,165,233,0.14);
  --color-info-border:          rgba(14,165,233,0.30);
  --color-info-text:            #7dd3fc;

  --sev-critical-bg:    rgba(244,63,94,0.14);    --sev-critical-text:  #fda4af;
  --sev-high-bg:        rgba(245,158,11,0.14);   --sev-high-text:      #fcd34d;
  --sev-medium-bg:      rgba(14,165,233,0.14);   --sev-medium-text:    #7dd3fc;
  --sev-low-bg:         rgba(100,116,139,0.14);  --sev-low-text:       var(--slate-4);
  --sev-matched-bg:     rgba(16,185,129,0.14);   --sev-matched-text:   var(--emerald-4);
  --sev-bonus-bg:       rgba(139,92,246,0.14);   --sev-bonus-text:     #c4b5fd;

  --nav-portfolio-color:   #38bdf8;              --nav-portfolio-bg:   rgba(56,189,248,0.10);
  --nav-news-color:        var(--emerald-6);     --nav-news-bg:        rgba(16,185,129,0.10);
  --nav-career-color:      var(--orange-6);      --nav-career-bg:      rgba(249,115,22,0.10);
  --nav-discovery-color:   var(--purple-6);      --nav-discovery-bg:   rgba(139,92,246,0.10);
  --nav-arch-color:        var(--indigo-6);      --nav-arch-bg:        rgba(99,102,241,0.10);
}


/* ═══════════════════════════════════════════════════════════
   LAYER 3 — COMPONENT TOKENS
   Scoped compositions built from semantic tokens.
════════════════════════════════════════════════════════════ */
:root {

  /* ── Button anatomy ─────────────────────────────────────── */
  --btn-height-xs:        28px;
  --btn-height-sm:        32px;
  --btn-height-md:        36px;
  --btn-height-lg:        44px;
  --btn-padding-x-xs:     10px;
  --btn-padding-x-sm:     12px;
  --btn-padding-x-md:     16px;
  --btn-padding-x-lg:     20px;
  --btn-font-size-xs:     0.6875rem;   /* 11px */
  --btn-font-size-sm:     0.75rem;     /* 12px */
  --btn-font-size-md:     0.8125rem;   /* 13px */
  --btn-font-size-lg:     0.875rem;    /* 14px */
  --btn-font-weight:      600;
  --btn-letter-spacing:   0.01em;
  --btn-radius:           var(--radius-md);
  --btn-gap:              6px;
  --btn-icon-size-sm:     14px;
  --btn-icon-size-md:     15px;
  --btn-icon-size-lg:     16px;
  --btn-transition:
    background-color 120ms ease,
    color            120ms ease,
    border-color     120ms ease,
    box-shadow       120ms ease,
    transform         80ms ease;
  --btn-disabled-opacity: 0.45;

  /* ── Input / Field anatomy ──────────────────────────────── */
  --input-height-sm:      32px;
  --input-height-md:      36px;
  --input-height-lg:      44px;
  --input-padding-x:      12px;
  --input-font-size:      0.8125rem;   /* 13px */
  --input-radius:         var(--radius-md);
  --input-bg:             var(--color-canvas);
  --input-border:         var(--color-border);
  --input-focus-ring:     0 0 0 3px color-mix(in srgb, var(--color-border-focus) 18%, transparent);
  --input-icon-size:      15px;

  /* ── Badge / Chip anatomy ───────────────────────────────── */
  --badge-height:         22px;
  --badge-padding-x:      8px;
  --badge-font-size:      0.6875rem;   /* 11px */
  --badge-font-weight:    600;
  --badge-radius:         var(--radius-full);
  --badge-gap:            5px;

  /* ── Card anatomy ───────────────────────────────────────── */
  --card-padding-sm:      16px;
  --card-padding-md:      20px;
  --card-padding-lg:      28px;
  --card-radius:          12px;
  --card-border:          var(--color-border);
  --card-bg:              var(--color-canvas);
  --card-shadow:          var(--shadow-sm);
  --card-shadow-hover:    var(--shadow-md);

  /* ── Avatar ─────────────────────────────────────────────── */
  --avatar-size-xs:  20px;
  --avatar-size-sm:  24px;
  --avatar-size-md:  32px;
  --avatar-size-lg:  40px;
  --avatar-size-xl:  48px;

  /* ── Sidebar layout ─────────────────────────────────────── */
  --sidebar-width:             220px;
  --sidebar-width-collapsed:   56px;
  --topbar-height:             48px;
  --chat-panel-width-default:  340px;
  --chat-panel-width-min:      260px;
  --chat-panel-width-max:      600px;

  /* ── Focus ring ─────────────────────────────────────────── */
  --focus-ring:         0 0 0 3px color-mix(in srgb, var(--color-border-focus) 20%, transparent);
  --focus-ring-danger:  0 0 0 3px color-mix(in srgb, var(--color-danger) 20%, transparent);
}


/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY
════════════════════════════════════════════════════════════ */
:root {
  /* Font families */
  --font-display:  'Outfit', system-ui, sans-serif;
  --font-sans:     'Inter', system-ui, sans-serif;
  --font-mono:     'Fira Code', 'Fira Mono', ui-monospace, monospace;

  /* Modular type scale  (base 16px, ratio ×1.25) */
  --text-xs:     0.64rem;    /*  ~10px */
  --text-sm:     0.75rem;    /*   12px */
  --text-md:     0.875rem;   /*   14px */
  --text-base:   1rem;       /*   16px */
  --text-lg:     1.125rem;   /*   18px */
  --text-xl:     1.25rem;    /*   20px */
  --text-2xl:    1.5rem;     /*   24px */
  --text-3xl:    1.875rem;   /*   30px */
  --text-4xl:    2.25rem;    /*   36px */
  --text-5xl:    3rem;       /*   48px */
  --text-6xl:    3.75rem;    /*   60px */

  /* Font weights */
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-extrabold:  800;

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* Letter spacing */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.2em;
}


/* ═══════════════════════════════════════════════════════════
   SPACING  (4px base grid)
════════════════════════════════════════════════════════════ */
:root {
  --space-px:   1px;
  --space-0-5:  0.125rem;   /*   2px */
  --space-1:    0.25rem;    /*   4px */
  --space-1-5:  0.375rem;   /*   6px */
  --space-2:    0.5rem;     /*   8px */
  --space-2-5:  0.625rem;   /*  10px */
  --space-3:    0.75rem;    /*  12px */
  --space-3-5:  0.875rem;   /*  14px */
  --space-4:    1rem;       /*  16px */
  --space-5:    1.25rem;    /*  20px */
  --space-6:    1.5rem;     /*  24px */
  --space-7:    1.75rem;    /*  28px */
  --space-8:    2rem;       /*  32px */
  --space-9:    2.25rem;    /*  36px */
  --space-10:   2.5rem;     /*  40px */
  --space-12:   3rem;       /*  48px */
  --space-14:   3.5rem;     /*  56px */
  --space-16:   4rem;       /*  64px */
  --space-20:   5rem;       /*  80px */
  --space-24:   6rem;       /*  96px */
}


/* ═══════════════════════════════════════════════════════════
   BORDER RADIUS
════════════════════════════════════════════════════════════ */
:root {
  --radius-none:  0;
  --radius-xs:    3px;
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    10px;
  --radius-xl:    12px;
  --radius-2xl:   16px;
  --radius-3xl:   20px;
  --radius-4xl:   24px;
  --radius-full:  9999px;
}


/* ═══════════════════════════════════════════════════════════
   SHADOWS  (light mode)
════════════════════════════════════════════════════════════ */
:root {
  --shadow-xs:     0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-sm:     0 1px 3px 0 rgba(0,0,0,0.07), 0 1px 2px -1px rgba(0,0,0,0.05);
  --shadow-md:     0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.04);
  --shadow-lg:     0 10px 15px -3px rgba(0,0,0,0.07), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl:     0 20px 25px -5px rgba(0,0,0,0.09), 0 8px 10px -6px rgba(0,0,0,0.04);
  --shadow-2xl:    0 25px 50px -12px rgba(0,0,0,0.16);
  --shadow-inner:  inset 0 2px 4px 0 rgba(0,0,0,0.04);
  /* Contextual */
  --shadow-focus:  0 0 0 3px color-mix(in srgb, var(--color-border-focus) 20%, transparent);
  --shadow-interactive:       0 4px 14px -2px color-mix(in srgb, var(--color-interactive) 30%, transparent);
  --shadow-interactive-hover: 0 6px 20px -2px color-mix(in srgb, var(--color-interactive) 40%, transparent);
}

[data-theme="dark"], .dark-mode {
  --shadow-xs:  0 1px 2px 0 rgba(0,0,0,0.25);
  --shadow-sm:  0 1px 3px 0 rgba(0,0,0,0.35), 0 1px 2px -1px rgba(0,0,0,0.25);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.40), 0 2px 4px -2px rgba(0,0,0,0.25);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.48), 0 4px 6px -4px rgba(0,0,0,0.30);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.56), 0 8px 10px -6px rgba(0,0,0,0.32);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.68);
}


/* ═══════════════════════════════════════════════════════════
   MOTION
════════════════════════════════════════════════════════════ */
:root {
  /* Durations */
  --duration-instant:  50ms;
  --duration-fast:     100ms;
  --duration-normal:   150ms;
  --duration-slow:     250ms;
  --duration-slower:   350ms;
  --duration-theme:    300ms;

  /* Easings */
  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Transition shorthands */
  --transition-colors:
    background-color var(--duration-normal) var(--ease-default),
    color            var(--duration-normal) var(--ease-default),
    border-color     var(--duration-normal) var(--ease-default),
    box-shadow       var(--duration-normal) var(--ease-default);
  --transition-transform: transform var(--duration-fast) var(--ease-out);
  --transition-theme:
    background-color var(--duration-theme) var(--ease-default),
    border-color     var(--duration-theme) var(--ease-default),
    color            var(--duration-theme) var(--ease-default);

  /* Aliases */
  --transition-fast: var(--duration-fast) var(--ease-default);
  --transition-base: var(--duration-normal) var(--ease-default);
  --transition-slow: var(--duration-slow) var(--ease-default);
}


/* ═══════════════════════════════════════════════════════════
   Z-INDEX SCALE
════════════════════════════════════════════════════════════ */
:root {
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}


/* ═══════════════════════════════════════════════════════════
   BACKWARD-COMPAT ALIASES
   Maps old token names → new semantic tokens.
   Consume new tokens in all new components.
════════════════════════════════════════════════════════════ */
:root {
  /* Accent */
  --accent-primary:          var(--color-interactive);
  --accent-hover:            var(--color-interactive-hover);
  --accent-light:            var(--emerald-6);
  --accent-bg:               var(--color-interactive-subtle);
  --accent-border:           var(--color-interactive-border);
  --accent-glow:             var(--shadow-interactive);
  --accent:                  var(--color-interactive);
  --accent-dim:              var(--color-interactive-subtle);
  --accent-dark:             var(--emerald-10);
  --accent-alt:              var(--color-interactive-hover);
  /* Surfaces */
  --bg-primary:              var(--color-canvas);
  --bg-secondary:            var(--color-surface);
  --bg-tertiary:             var(--color-surface-raised);
  --bg-sidebar:              var(--color-surface);
  --bg-elevated:             var(--color-surface-overlay);
  --bg-base:                 var(--color-canvas);
  --bg-surface:              var(--color-surface);
  --bg-card:                 var(--color-canvas);
  /* Text */
  --text-primary:            var(--color-text);
  --text-secondary:          var(--color-text-subtle);
  --text-tertiary:           var(--color-text-placeholder);
  --text-faint:              var(--color-text-disabled);
  --text-invert:             var(--color-text-invert);
  --color-text-primary:      var(--color-text);
  --color-text-secondary:    var(--color-text-subtle);
  --color-text-muted:        var(--color-text-placeholder);
  --color-text-on-primary:   var(--color-interactive-fg);
  --color-text-faint:        var(--color-text-disabled);
  /* Borders */
  --border-primary:          var(--color-border);
  --border-secondary:        var(--color-border-strong);
  --border:                  var(--color-border);
  --border-hover:            var(--color-interactive-border);
  /* Color aliases */
  --color-primary:           var(--color-interactive);
  --color-primary-hover:     var(--color-interactive-hover);
  --color-primary-active:    var(--color-interactive-active);
  --color-primary-subtle:    var(--color-interactive-subtle);
  --color-primary-glow:      var(--shadow-interactive);
  --color-primary-border:    var(--color-interactive-border);
  --color-secondary:         var(--indigo-6);
  --color-secondary-hover:   var(--indigo-7);
  --color-secondary-subtle:  var(--indigo-2);
  --color-destructive:       var(--color-danger);
  --color-destructive-hover: var(--color-danger-hover);
  --color-background:        var(--color-canvas);
  --color-surface-elevated:  var(--color-surface-overlay);
  --color-sidebar:           var(--color-surface);
  --color-card:              var(--color-canvas);
  --color-border:            var(--color-border);
  --color-border-hover:      var(--color-interactive-border);
  --color-border-subtle:     var(--color-border-hairline);
  --color-error:             var(--color-danger);
  --color-error-surface:     var(--color-danger-subtle);
  --color-error-border:      var(--color-danger-border);
  --color-error-foreground:  var(--color-danger-text);
  --color-shadow-deep:       rgba(0,0,0,0.18);
  --color-hero-glow:         color-mix(in srgb, var(--color-interactive) 15%, transparent);
  --color-panel-glow:        color-mix(in srgb, var(--color-interactive) 05%, transparent);
  --color-graph-glow:        color-mix(in srgb, var(--color-interactive) 20%, transparent);
  --color-graph-edge:        color-mix(in srgb, var(--color-interactive) 16%, transparent);
  --color-input-bg:          var(--color-canvas);
  --color-input-border:      var(--color-border);
  --color-overlay-muted:     rgba(0,0,0,0.03);
  --color-overlay-border:    var(--color-border);
  --color-indigo:            var(--indigo-6);
  --color-orange:            var(--orange-6);
  --color-purple:            var(--purple-6);
  --color-amber:             var(--gold-6);
  --color-success:           var(--color-success);
  --color-warning:           var(--color-warning);
  --color-danger:            var(--color-danger);
  --color-info:              var(--color-info);
  --font-heading:            var(--font-display);
  --font-body:               var(--font-sans);
  --font-family-base:        var(--font-sans);
  --font-family-heading:     var(--font-display);
  --font-family-mono:        var(--font-mono);
  --font-size-xs:            0.6875rem;
  --font-size-sm:            var(--text-sm);
  --font-size-md:            0.8125rem;
  --font-size-base:          var(--text-md);
  --font-size-lg:            var(--text-base);
  --font-size-xl:            var(--text-lg);
  --font-weight-semibold:    var(--weight-semibold);
  --font-weight-bold:        var(--weight-bold);
  --font-weight-extrabold:   var(--weight-extrabold);
  --line-height-tight:       var(--leading-tight);
  --line-height-relaxed:     var(--leading-relaxed);
  --radius-card:             var(--card-radius);
  --nav-accent-color:        var(--color-interactive);
}


/* ═══════════════════════════════════════════════════════════
   GLOBAL BASE STYLES
════════════════════════════════════════════════════════════ */
:root {
  font-family: var(--font-sans);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  color: var(--color-text);
  background-color: var(--color-canvas);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Smooth theme transitions on theming properties only */
*, *::before, *::after {
  transition: var(--transition-theme);
}

/* ── Scrollbars ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-border-strong); }


/* ═══════════════════════════════════════════════════════════
   UTILITY CLASSES  (optional, use as needed)
════════════════════════════════════════════════════════════ */

/* Typography */
.ai-display  { font-family: var(--font-display); }
.ai-mono     { font-family: var(--font-mono); }
.ai-eyebrow  {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color:          var(--color-text-brand);
}

/* Button base */
.ai-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--btn-gap);
  height:          var(--btn-height-md);
  padding:         0 var(--btn-padding-x-md);
  font-family:     var(--font-sans);
  font-size:       var(--btn-font-size-md);
  font-weight:     var(--btn-font-weight);
  letter-spacing:  var(--btn-letter-spacing);
  border-radius:   var(--btn-radius);
  border:          1px solid transparent;
  cursor:          pointer;
  transition:      var(--btn-transition);
  white-space:     nowrap;
  user-select:     none;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.ai-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ai-btn:disabled, .ai-btn[aria-disabled="true"] { opacity: var(--btn-disabled-opacity); cursor: not-allowed; pointer-events: none; }

/* Button sizes */
.ai-btn-xs { height: var(--btn-height-xs); padding: 0 var(--btn-padding-x-xs); font-size: var(--btn-font-size-xs); }
.ai-btn-sm { height: var(--btn-height-sm); padding: 0 var(--btn-padding-x-sm); font-size: var(--btn-font-size-sm); }
.ai-btn-lg { height: var(--btn-height-lg); padding: 0 var(--btn-padding-x-lg); font-size: var(--btn-font-size-lg); }

/* Button variants */
.ai-btn-primary    { background: var(--color-interactive); color: var(--color-interactive-fg); border-color: var(--color-interactive); }
.ai-btn-primary:hover:not(:disabled)  { background: var(--color-interactive-hover); border-color: var(--color-interactive-hover); box-shadow: var(--shadow-interactive-hover); transform: translateY(-1px); }
.ai-btn-primary:active:not(:disabled) { background: var(--color-interactive-active); transform: translateY(0); box-shadow: none; }

.ai-btn-secondary  { background: var(--color-interactive-subtle); color: var(--color-interactive-text); border-color: var(--color-interactive-border); }
.ai-btn-secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--color-interactive-subtle) 80%, var(--color-interactive-border)); }

.ai-btn-outline    { background: transparent; color: var(--color-text-subtle); border-color: var(--color-border); }
.ai-btn-outline:hover:not(:disabled)  { color: var(--color-text); border-color: var(--color-border-strong); background: var(--color-surface); }

.ai-btn-ghost      { background: transparent; color: var(--color-text-subtle); border-color: transparent; }
.ai-btn-ghost:hover:not(:disabled)    { background: var(--color-surface); color: var(--color-text); }

.ai-btn-danger     { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.ai-btn-danger:hover:not(:disabled)   { background: var(--color-danger-hover); border-color: var(--color-danger-hover); }

/* Badge */
.ai-badge {
  display:      inline-flex;
  align-items:  center;
  gap:          var(--badge-gap);
  height:       var(--badge-height);
  padding:      0 var(--badge-padding-x);
  font-family:  var(--font-sans);
  font-size:    var(--badge-font-size);
  font-weight:  var(--badge-font-weight);
  border-radius: var(--badge-radius);
  border:       1px solid transparent;
  white-space:  nowrap;
}
.ai-badge-brand   { background: var(--color-interactive-subtle); border-color: var(--color-interactive-border); color: var(--color-interactive-text); }
.ai-badge-success { background: var(--color-success-subtle);     border-color: var(--color-success-border);     color: var(--color-success-text); }
.ai-badge-danger  { background: var(--color-danger-subtle);      border-color: var(--color-danger-border);      color: var(--color-danger-text); }
.ai-badge-warning { background: var(--color-warning-subtle);     border-color: var(--color-warning-border);     color: var(--color-warning-text); }
.ai-badge-info    { background: var(--color-info-subtle);        border-color: var(--color-info-border);        color: var(--color-info-text); }
.ai-badge-neutral { background: var(--color-surface-raised);     border-color: var(--color-border);             color: var(--color-text-subtle); }

/* Card */
.ai-card {
  background:    var(--card-bg);
  border:        1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding:       var(--card-padding-md);
  box-shadow:    var(--card-shadow);
  transition:    box-shadow var(--duration-normal) var(--ease-default),
                 border-color var(--duration-normal) var(--ease-default),
                 transform var(--duration-fast) var(--ease-out);
}
.ai-card:hover {
  box-shadow:    var(--card-shadow-hover);
  border-color:  var(--color-interactive-border);
  transform:     translateY(-2px);
}

/* Input */
.ai-input {
  width:         100%;
  height:        var(--input-height-md);
  padding:       0 var(--input-padding-x);
  background:    var(--input-bg);
  border:        1px solid var(--input-border);
  border-radius: var(--input-radius);
  color:         var(--color-text);
  font-family:   var(--font-sans);
  font-size:     var(--input-font-size);
  outline:       none;
  transition:    var(--transition-colors);
}
.ai-input::placeholder { color: var(--color-text-placeholder); }
.ai-input:focus { border-color: var(--color-border-focus); box-shadow: var(--input-focus-ring); }
.ai-input:disabled { opacity: 0.5; cursor: not-allowed; }