/* ==========================================================================
   Lumina Design System — Foundations
   colors_and_type.css

   Tokens ported from DESIGN.md (UI Kit · Workbench, 2026-05-24).
   Source of truth: frontend/src/styles/tokens/
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Commit+Mono:ital,wght@0,400;0,500;0,600;1,400&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&display=swap");

:root {
  color-scheme: dark;

  /* ── Raw text scale ──────────────────────────────────────── */
  --text-01: #ededed;
  --text-02: #c4c4c4;
  --text-03: #a1a1a1;
  --text-04: #818181;
  --text-05: #6b6b6b;

  /* ── Background neutrals ─────────────────────────────────── */
  --background-neutral-000: #0a0a0a;
  --background-neutral-010: #161616;
  --background-neutral-020: #1e1e1e;
  --background-neutral-030: #252525;

  /* ── Tint + borders ──────────────────────────────────────── */
  --background-tint-010: rgb(255 255 255 / 6%);
  --background-tint-020: rgb(255 255 255 / 11%);
  --border-01: rgb(255 255 255 / 7%);
  --border-02: rgb(255 255 255 / 12%);
  --border-03: rgb(255 255 255 / 18%);
  --border-04: rgb(94 234 212 / 30%);
  --border-05: rgb(94 234 212 / 55%);

  /* ── Lumina semantic surfaces ────────────────────────────── */
  --lumina-surface-base:          #0a0a0a;
  --lumina-surface-elevated:      #161616;
  --lumina-surface-raised:        #1e1e1e;
  --lumina-surface-sunken:        #050505;
  --lumina-surface-control:       #161616;
  --lumina-surface-control-hover: #252525;

  /* ── Lumina text ─────────────────────────────────────────── */
  --lumina-text-primary:   #ededed;
  --lumina-text-secondary: #a1a1a1;
  --lumina-text-muted:     #6b6b6b;
  --lumina-text-inverse:   #0a0a0a;

  /* ── Accents ─────────────────────────────────────────────── */
  --lumina-accent-verdant:  #5eead4;
  --lumina-accent-teal:     #67e8f9;
  --lumina-accent-graphite: #e5e5e5;

  /* ── Status ──────────────────────────────────────────────── */
  --lumina-status-ok:     #4ade80;
  --lumina-status-warn:   #facc15;
  --lumina-status-danger: #f87171;
  --lumina-status-info:   #93c5fd;

  /* ── Focus ───────────────────────────────────────────────── */
  --lumina-focus-ring:        #5eead4;
  --lumina-focus-wash:        rgb(94 234 212 / 12%);
  --lumina-focus-ring-shadow: rgb(94 234 212 / 25%);

  /* ── Dividers ────────────────────────────────────────────── */
  --lumina-divider-subtle: rgb(255 255 255 / 9%);
  --lumina-divider-strong: rgb(255 255 255 / 17%);

  /* ── Shadow ──────────────────────────────────────────────── */
  --lumina-shadow-popover: 0 18px 42px rgb(0 0 0 / 42%);

  /* ── Recording ───────────────────────────────────────────── */
  --lumina-recording-active:      #f87171;
  --lumina-recording-active-glow: rgb(248 113 113 / 30%);
  --lumina-recording-armed:       #facc15;
  --lumina-recording-idle:        #6b6b6b;

  /* ── Citation chips ──────────────────────────────────────── */
  --lumina-citation-chip-bg:     rgb(18 52 48 / 85%);
  --lumina-citation-chip-fg:     #5eead4;
  --lumina-citation-chip-border: rgb(94 234 212 / 28%);
  --lumina-citation-rule:        rgb(94 234 212 / 18%);

  /* ── Breakpoints ─────────────────────────────────────────── */
  --lumina-size-mobile-breakpoint: 800px;

  /* ── Radii ───────────────────────────────────────────────── */
  --lumina-radius-xs:   4px;
  --lumina-radius-sm:   8px;
  --lumina-radius-md:   12px;
  --lumina-radius-lg:   14px;
  --lumina-radius-xl:   16px;
  --lumina-radius-xxl:  20px;
  --lumina-radius-full: 32px;

  /* ── Spacing scale ───────────────────────────────────────── */
  --lumina-space-hairline: 2px;
  --lumina-space-xxs:      4px;
  --lumina-space-xs:       8px;
  --lumina-space-sm:       12px;
  --lumina-space-md:       16px;
  --lumina-space-lg:       24px;
  --lumina-space-xl:       32px;
  --lumina-space-xxl:      48px;

  /* ── Typography stacks ───────────────────────────────────── */
  --lumina-font-sans:    'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --lumina-font-serif:   'EB Garamond', ui-serif, Georgia, serif;
  --lumina-font-mono:    'Commit Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --lumina-font-display: 'Bricolage Grotesque', 'Schibsted Grotesk', ui-sans-serif, sans-serif;

  /* ── Type scale ──────────────────────────────────────────── */
  --fs-display:      32px;  --lh-display:      1.19;  --fw-display:      600;
  --fs-h1:           24px;  --lh-h1:           1.33;  --fw-h1:           600;
  --fs-h2:           19px;  --lh-h2:           1.37;  --fw-h2:           600;
  --fs-h3:           15px;  --lh-h3:           1.47;  --fw-h3:           700;
  --fs-body:         14px;  --lh-body:         1.57;  --fw-body:         500;
  --fs-body-reading: 15px;  --lh-body-reading: 1.73;  --fw-body-reading: 400;
  --fs-caption:      12px;  --lh-caption:      1.5;   --fw-caption:      500;
  --fs-micro:        11px;  --lh-micro:        1.45;  --fw-micro:        600;
  --fs-mono:         13px;  --lh-mono:         1.54;  --fw-mono:         500;
  --fs-mono-sm:      11px;  --lh-mono-sm:      1.45;  --fw-mono-sm:      500;

  /* ── Generic surface/text aliases (preview cards) ────────── */
  --surface-base:        var(--lumina-surface-base);
  --surface-elevated:    var(--lumina-surface-elevated);
  --surface-raised:      var(--lumina-surface-raised);
  --surface-sunken:      var(--lumina-surface-sunken);
  --text-primary:        var(--lumina-text-primary);
  --text-secondary:      var(--lumina-text-secondary);
  --text-muted:          var(--lumina-text-muted);
  --text-inverse:        var(--lumina-text-inverse);
  --accent-verdant:      var(--lumina-accent-verdant);
  --accent-teal:         var(--lumina-accent-teal);
  --accent-graphite:     var(--lumina-accent-graphite);
  --status-ok:           var(--lumina-status-ok);
  --status-warn:         var(--lumina-status-warn);
  --status-danger:       var(--lumina-status-danger);
  --status-info:         var(--lumina-status-info);
  --citation-bg:         var(--lumina-citation-chip-bg);
  --citation-fg:         var(--lumina-citation-chip-fg);
  --recording-active:    var(--lumina-recording-active);
  --recording-armed:     var(--lumina-recording-armed);
  --focus-ring:          var(--lumina-focus-ring);
  --divider-subtle:      var(--lumina-divider-subtle);
  --divider-strong:      var(--lumina-divider-strong);
  --font-sans:           var(--lumina-font-sans);
  --font-serif:          var(--lumina-font-serif);
  --font-mono:           var(--lumina-font-mono);
  --font-display:        var(--lumina-font-display);

  /* ── Radius aliases ──────────────────────────────────────── */
  --r-xs:   var(--lumina-radius-xs);
  --r-sm:   var(--lumina-radius-sm);
  --r-md:   var(--lumina-radius-md);
  --r-lg:   var(--lumina-radius-lg);
  --r-xl:   var(--lumina-radius-xl);
  --r-xxl:  var(--lumina-radius-xxl);
  --r-full: var(--lumina-radius-full);

  /* ── Spacing aliases ─────────────────────────────────────── */
  --space-hairline: var(--lumina-space-hairline);
  --space-xxs:      var(--lumina-space-xxs);
  --space-xs:       var(--lumina-space-xs);
  --space-sm:       var(--lumina-space-sm);
  --space-md:       var(--lumina-space-md);
  --space-lg:       var(--lumina-space-lg);
  --space-xl:       var(--lumina-space-xl);
  --space-xxl:      var(--lumina-space-xxl);

  /* ── Motion ──────────────────────────────────────────────── */
  --shadow-overlay:  var(--lumina-shadow-popover);
  --ease-standard:   cubic-bezier(0.2, 0, 0.2, 1);
  --dur-fast:        120ms;
}

/* ── Light theme overrides ───────────────────────────────────── */
:root[data-lumina-theme='light'] {
  color-scheme: light;

  --background-neutral-000: #fafafa;
  --background-neutral-010: #f2f2f2;
  --background-neutral-020: #e8e8e8;
  --background-neutral-030: #dedede;

  --lumina-surface-base:     #fafafa;
  --lumina-surface-elevated: #ffffff;
  --lumina-surface-raised:   #f0f0f0;
  --lumina-surface-sunken:   #ebebeb;

  --lumina-text-primary:   #0a0a0a;
  --lumina-text-secondary: #525252;
  --lumina-text-muted:     #8a8a8a;
  --lumina-text-inverse:   #fafafa;

  --lumina-accent-verdant:  #0d9488;
  --lumina-accent-teal:     #0891b2;
  --lumina-accent-graphite: #1a1a1a;

  --lumina-focus-ring:     #0d9488;
  --lumina-focus-wash:     rgb(13 148 136 / 12%);
  --lumina-divider-subtle: rgb(0 0 0 / 9%);
  --lumina-divider-strong: rgb(0 0 0 / 16%);

  --border-01: rgb(0 0 0 / 7%);
  --border-02: rgb(0 0 0 / 12%);
  --border-03: rgb(0 0 0 / 18%);
}

/* ── Element defaults ────────────────────────────────────────── */
html, body {
  background: var(--lumina-surface-base);
  color: var(--lumina-text-primary);
  font-family: var(--lumina-font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Type utility classes ─────────────────────────────────────── */
.t-display { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-display); }
.t-h1, h1  { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-h1); margin: 0; }
.t-h2, h2  { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-h2); margin: 0; }
.t-h3, h3  { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-h3); margin: 0; }
.t-body, p { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-body); margin: 0; }
.t-body-reading { font-size: var(--fs-body-reading); line-height: var(--lh-body-reading); font-weight: var(--fw-body-reading); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-caption); color: var(--text-secondary); }
.t-micro   { font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: var(--fw-micro); }
.t-mono, code, kbd, samp { font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-mono); font-weight: var(--fw-mono); }
.t-mono-sm { font-family: var(--font-mono); font-size: var(--fs-mono-sm); line-height: var(--lh-mono-sm); font-weight: var(--fw-mono-sm); }

/* ── Interactive defaults ─────────────────────────────────────── */
a { color: var(--accent-verdant); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--accent-verdant) 35%, transparent); }
a:hover { border-bottom-color: var(--accent-verdant); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: color-mix(in oklab, var(--accent-verdant) 28%, transparent); color: var(--text-primary); }
* { scrollbar-width: thin; scrollbar-color: var(--divider-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--divider-strong); border-radius: var(--r-full); border: 2px solid transparent; background-clip: padding-box; }