/* ============================================================
   @lumino/design-system — CSS custom properties
   Harvested from the portal. Canonical = --color-* / --space-* / --text-*.
   Legacy aliases (--bg-* / --ink-* / --s-*) are kept for portal compatibility.
   ============================================================ */

:root {
  /* ── Surface (dark default) ─────────────────────────────── */
  --color-surface-base:     #15110d;
  --color-surface-panel:    #1c1813;
  --color-surface-elevated: #24201a;
  --color-surface-input:    #2d2821;
  --color-surface-active:   #3a342b;

  /* ── Text ────────────────────────────────────────────────── */
  --color-text-primary:   #f5ecdd;
  --color-text-secondary: #d9cdb8;
  --color-text-tertiary:  #9a8f7b;
  --color-text-disabled:  #6b6353;

  /* ── Border ─────────────────────────────────────────────── */
  --color-border-hairline: #342e25;
  --color-border-stronger: #453d31;

  /* ── Accent ─────────────────────────────────────────────── */
  --color-accent:          #d97757;
  --color-accent-soft:     #c89b7b;
  --color-accent-faint:    #d9775720;
  --color-accent-glow:     #d9775540;
  --color-accent-ink:      #1a1208;
  --color-accent-deep:     #f0a080;  /* readable text color on accent-faint bg (dark mode: lighter) */

  /* ── Semantic ────────────────────────────────────────────── */
  /* Base semantic color — the "voice" of each signal.
     Dark mode default: mid-light hues that read on dark surfaces.         */
  --color-success: #9cc89b;
  --color-warning: #e8b86a;
  --color-error:   #d97070;
  --color-info:    #7fb0c9;
  /* Ink — used for TEXT on the tinted background. Must hit ≥4.5:1 on bg.   */
  --color-success-ink: #c2e6c1;
  --color-warning-ink: #f5d28a;
  --color-error-ink:   #f29999;
  --color-info-ink:    #a6ccdd;
  /* Bg — used as the tinted surface behind ink text.                       */
  --color-success-bg:  color-mix(in oklab, var(--color-success) 18%, transparent);
  --color-warning-bg:  color-mix(in oklab, var(--color-warning) 18%, transparent);
  --color-error-bg:    color-mix(in oklab, var(--color-error)   18%, transparent);
  --color-info-bg:     color-mix(in oklab, var(--color-info)    18%, transparent);
  /* Edge — border color.                                                   */
  --color-success-edge: color-mix(in oklab, var(--color-success) 32%, transparent);
  --color-warning-edge: color-mix(in oklab, var(--color-warning) 32%, transparent);
  --color-error-edge:   color-mix(in oklab, var(--color-error)   32%, transparent);
  --color-info-edge:    color-mix(in oklab, var(--color-info)    32%, transparent);

  /* ── Brand ───────────────────────────────────────────────── */
  --color-brand-ink:        #1a1714;
  --color-brand-cream:      #f5eee0;
  --color-brand-terracotta: #d97757;
  --color-brand-clay:       #c89b7b;
  --color-brand-ochre:      #d9a654;

  /* ── Category ────────────────────────────────────────────── */
  --color-cat-ai:   #d97757;
  --color-cat-cs:   #c89b7b;
  --color-cat-math: #b89070;
  --color-cat-sys:  #8fa68a;
  --color-cat-conv: #c9a86a;

  /* ── Typography ─────────────────────────────────────────── */
  --font-sans:    "Inter Tight", "Söhne", system-ui, -apple-system, sans-serif;
  --font-display: "Fraunces", "Inter Tight", serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", ui-monospace, monospace;
  --font-rounded: "Nunito", "Inter Tight", sans-serif;
  --font-heading: var(--font-sans);
  --font-body:    var(--font-sans);

  /* Type scale */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  28px;
  --text-3xl:  40px;
  --text-4xl:  56px;

  /* Line height */
  --leading-tight:  1.15;
  --leading-normal: 1.45;
  --leading-loose:  1.6;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-0:   0px;
  --space-px:  1px;
  --space-0-5: 2px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   40px;
  --space-9:   56px;

  /* ── Border radius ───────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* Semantic radius aliases (overridden per theme) */
  --radius-default: var(--radius-md);
  --radius-card:    var(--radius-lg);
  --radius-button:  var(--radius-md);

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4);
  --ring:      0 0 0 2px var(--color-accent-glow);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   140ms;
  --duration-normal: 260ms;
  --duration-slow:   480ms;

  /* ── Z-index ─────────────────────────────────────────────── */
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ── Nav / chrome dimensions ────────────────────────────── */
  --nav-w:           248px;
  --nav-w-collapsed: 68px;
  --hero-weight:     500;

  /* ── Legacy aliases ─────────────────────────────────────────
     Upstream portal JSX/CSS uses shorter token names. Keep the
     aliases so ported components work without rewrites. The new
     `--color-*`, `--space-*`, `--radius-*`, `--text-*` names
     remain canonical; these aliases will be reviewed/retired in
     a future major bump. */

  /* Surface */
  --bg-0: var(--color-surface-base);
  --bg-1: var(--color-surface-panel);
  --bg-2: var(--color-surface-elevated);
  --bg-3: var(--color-surface-input);
  --bg-4: var(--color-surface-active);

  /* Text */
  --ink-0: var(--color-text-primary);
  --ink-1: var(--color-text-secondary);
  --ink-2: var(--color-text-tertiary);
  --ink-3: var(--color-text-disabled);

  /* Border */
  --line-0: var(--color-border-hairline);
  --line-1: var(--color-border-stronger);

  /* Accent */
  --accent:       var(--color-accent);
  --accent-soft:  var(--color-accent-soft);
  --accent-faint: var(--color-accent-faint);
  --accent-glow:  var(--color-accent-glow);
  --accent-ink:   var(--color-accent-ink);

  /* Semantic */
  --ok:   var(--color-success);
  --warn: var(--color-warning);
  --err:  var(--color-error);
  --info: var(--color-info);

  /* Category */
  --cat-ai:   var(--color-cat-ai);
  --cat-cs:   var(--color-cat-cs);
  --cat-math: var(--color-cat-math);
  --cat-sys:  var(--color-cat-sys);
  --cat-conv: var(--color-cat-conv);

  /* Radii */
  --r-xs:   var(--radius-xs);
  --r-sm:   var(--radius-sm);
  --r-md:   var(--radius-md);
  --r-lg:   var(--radius-lg);
  --r-xl:   var(--radius-xl);
  --r-2xl:  var(--radius-2xl);
  --r-pill: var(--radius-pill);

  /* Spacing — upstream --s-0 is 2px (not 0); keep that semantics */
  --s-0: 2px;
  --s-1: var(--space-1);
  --s-2: var(--space-2);
  --s-3: var(--space-3);
  --s-4: var(--space-4);
  --s-5: var(--space-5);
  --s-6: var(--space-6);
  --s-7: var(--space-7);
  --s-8: var(--space-8);
  --s-9: var(--space-9);

  /* Type scale */
  --fs-xs:   var(--text-xs);
  --fs-sm:   var(--text-sm);
  --fs-base: var(--text-base);
  --fs-md:   var(--text-md);
  --fs-lg:   var(--text-lg);
  --fs-xl:   var(--text-xl);
  --fs-2xl:  var(--text-2xl);
  --fs-3xl:  var(--text-3xl);
  --fs-4xl:  var(--text-4xl);

  /* Line height */
  --lh-tight:  var(--leading-tight);
  --lh-normal: var(--leading-normal);
  --lh-loose:  var(--leading-loose);

  /* Motion */
  --dur-fast: var(--duration-fast);
  --dur-med:  var(--duration-normal);
  --dur-slow: var(--duration-slow);
}

/* ── Theme: PRO (default — adult, precise) ─────────────── */
[data-theme="pro"] {
  --font-heading:   var(--font-sans);
  --font-body:      var(--font-sans);
  --radius-default: var(--radius-md);
  --radius-card:    var(--radius-lg);
  --radius-button:  var(--radius-md);
}

/* ── Theme: STUDIO (hybrid — teen/young-adult) ─────────── */
[data-theme="studio"] {
  --font-heading:   var(--font-display);
  --font-body:      var(--font-sans);
  --radius-default: var(--radius-lg);
  --radius-card:    var(--radius-xl);
  --radius-button:  var(--radius-lg);
  --color-surface-base:     #17120c;
  --color-surface-panel:    #1f1a13;
  --color-surface-elevated: #27211a;
  --hero-weight: 400;
}

/* ── Theme: PLAYFUL (kids) ──────────────────────────────── */
[data-theme="playful"] {
  --font-heading:   var(--font-rounded);
  --font-body:      var(--font-rounded);
  --radius-default: var(--radius-xl);
  --radius-card:    var(--radius-2xl);
  --radius-button:  var(--radius-pill);
  --hero-weight:    800;
  --color-accent:       #f08a5d;
  --color-accent-soft:  #f5b784;
  --color-accent-faint: #f08a5d28;
  --color-accent-glow:  #f08a5d55;
  --color-surface-base:     #1c1712;
  --color-surface-panel:    #251f18;
  --color-surface-elevated: #2f2820;
  --color-surface-input:    #3a3127;
  --color-cat-ai:   #f08a5d;
  --color-cat-cs:   #a5c9c6;
  --color-cat-math: #e8b86a;
  --color-cat-sys:  #b4d4a8;
  --color-cat-conv: #e89aa8;
}

/* ── Dark mode (explicit — so scoped [data-mode="dark"] cards
      can restore dark tokens when an ancestor sets [data-mode="light"]) ── */
[data-mode="dark"] {
  --color-surface-base:     #15110d;
  --color-surface-panel:    #1c1813;
  --color-surface-elevated: #24201a;
  --color-surface-input:    #2d2821;
  --color-surface-active:   #3a342b;
  --color-text-primary:   #f5ecdd;
  --color-text-secondary: #d9cdb8;
  --color-text-tertiary:  #9a8f7b;
  --color-text-disabled:  #6b6353;
  --color-border-hairline: #342e25;
  --color-border-stronger: #453d31;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.30);
}
[data-mode="dark"][data-theme="studio"] {
  --color-surface-base:     #17120c;
  --color-surface-panel:    #1f1a13;
  --color-surface-elevated: #27211a;
}
[data-mode="dark"][data-theme="playful"] {
  --color-surface-base:     #1c1712;
  --color-surface-panel:    #251f18;
  --color-surface-elevated: #2f2820;
  --color-surface-input:    #3a3127;
}

/* ── Light mode ─────────────────────────────────────────── */
[data-mode="light"] {
  --color-surface-base:     #f5ede0;
  --color-surface-panel:    #faf3e6;
  --color-surface-elevated: #fffaf0;
  --color-surface-input:    #ece3d1;
  --color-surface-active:   #e0d4bc;
  --color-text-primary:   #1a1510;
  --color-text-secondary: #3d3428;
  --color-text-tertiary:  #6b5f4d;
  --color-text-disabled:  #8a7d68;
  --color-border-hairline: #e5dbc6;
  --color-border-stronger: #d0c2a6;
  /* Accent — in light mode use a DEEPER tone for text over accent-faint bg */
  --color-accent-deep:     #a64a28;
  /* Semantic — overridden for light mode. Ink = dark, readable on tint.   */
  --color-success: #4a8f4a;     /* darker sage for dots / solid usage     */
  --color-warning: #b87a18;     /* deep amber                              */
  --color-error:   #b83a3a;     /* deep red                                */
  --color-info:    #2f6e90;     /* deep teal                               */
  --color-success-ink: #2d5d2d;
  --color-warning-ink: #8a5a12;
  --color-error-ink:   #8a2828;
  --color-info-ink:    #1d4e67;
  --color-success-bg:  color-mix(in oklab, var(--color-success) 16%, var(--color-surface-base));
  --color-warning-bg:  color-mix(in oklab, var(--color-warning) 16%, var(--color-surface-base));
  --color-error-bg:    color-mix(in oklab, var(--color-error)   16%, var(--color-surface-base));
  --color-info-bg:     color-mix(in oklab, var(--color-info)    16%, var(--color-surface-base));
  --color-success-edge: color-mix(in oklab, var(--color-success) 40%, transparent);
  --color-warning-edge: color-mix(in oklab, var(--color-warning) 40%, transparent);
  --color-error-edge:   color-mix(in oklab, var(--color-error)   40%, transparent);
  --color-info-edge:    color-mix(in oklab, var(--color-info)    40%, transparent);
  --shadow-sm: 0 1px 2px rgba(60, 40, 20, 0.08);
  --shadow-md: 0 4px 16px rgba(60, 40, 20, 0.10), 0 1px 2px rgba(60, 40, 20, 0.08);
  --shadow-lg: 0 20px 60px rgba(60, 40, 20, 0.15), 0 2px 8px rgba(60, 40, 20, 0.10);
}

[data-mode="light"][data-theme="studio"] {
  --color-surface-base:     #f2e8d5;
  --color-surface-panel:    #f8efdd;
  --color-surface-elevated: #fdf5e4;
}
[data-mode="light"][data-theme="playful"] {
  --color-surface-base:     #fef3e2;
  --color-surface-panel:    #fff9ec;
  --color-surface-elevated: #fffdf5;
  --color-surface-input:    #f5e8d0;
}

/* ── Density modifiers ──────────────────────────────────── */
[data-density="compact"] {
  --space-3:  8px;
  --space-4:  12px;
  --space-5:  14px;
  --space-6:  18px;
  --space-7:  24px;
  --space-8:  32px;
  --text-base: 12px;
  --nav-w:    220px;
}
[data-density="spacious"] {
  --space-3:  16px;
  --space-4:  20px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  56px;
  --text-base: 14px;
  --nav-w:    272px;
}