/* Parola design tokens.
   Default: Derek Premium UI (design-ref/premium-ui/SPEC.md §3, 2026-10-30) = dark: no data-theme or
   data-theme="dark". Light Foam = <html data-theme="light">. The theme switch (account menu + Settings)
   stores light | dark | system under localStorage "parola.theme"; the <head> boot script in
   views/shell.ts resolves it (system → prefers-color-scheme) and sets data-theme before paint.
   Brand names stay stable; theme maps semantic surfaces/text/borders.
   Gold (--beam) is a lantern ONLY: active nav pip, unread dot, keyword underline, the one primary
   action, own SOV bar. More than three gold things on screen at once: remove one.
   Fonts are self-hosted (public/fonts): Plus Jakarta Sans for all UI; Instrument Serif only for rare
   heroes (first-run and onboarding headlines, empty-state title, Morning Brief), never page titles.
   Raw hex lives here and nowhere else: app.css and premium.css use the names (DESIGN-SYSTEM.md). */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/PlusJakartaSans.ttf") format("truetype");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/InstrumentSerif-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;
  /* Brand palette (v4) */
  --abyss: #061525;
  --navy-2: #0C2740;
  --navy-3: #123250;
  --navy-4: #173A5A;
  --navy-5: #1E4668;
  --navy: #0A2238;
  --navy-deep: #061525; /* auth input fill */
  --gold: #F5C14A; /* picked family chip, AI engine accents */
  --foam: #F7F4EE;
  --foam-80: rgba(247, 244, 238, 0.80);
  --foam-85: rgba(247, 244, 238, 0.85);
  --foam-90: rgba(247, 244, 238, 0.92);
  --beam: #F5C14A;
  --beam-ink: #1A1200;
  --beam-soft: rgba(245, 193, 74, 0.14);
  --beam-line: rgba(245, 193, 74, 0.45);
  --beam-glow: rgba(245, 193, 74, 0.28);
  --ember: #E08A2E;
  --teal: #4A7088;
  --teal-bright: #5A8AA4;
  --shore: #6B4530;
  --surf: #0A1E30;
  --surf2: #0D2438;
  --surf3: #122C42;
  --pos: #3D9B6E;
  --neg: #C45B4A;
  --neu: #7A8796;
  --white: #fff; /* text on the navy rail, in both themes */
  --bar-start: #2A4A5C; /* rival share bars run --bar-start to --teal */
  --avatar-from: #1A3A55;
  --avatar-to: #0A2033;

  /* Type */
  --font-ui: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-display: var(--font-serif); /* rare heroes only: first-run and onboarding headlines, empty-state title, Morning Brief */
  --font-nav: var(--font-ui);
  /* Counts use the UI face with tabular figures; real monospace only for code. */
  --font-mono: var(--font-ui);
  --font-code: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* The type scale. CSS sets font-size through these names only; DESIGN-SYSTEM.md says which is for what.
     tests/design-system.test.ts fails on a raw px size that is not on its frozen legacy list. */
  --t-body: 15px;
  --t-body-lg: 16px;
  --text-micro: 10px; /* digits in a badge, nothing a person reads as a sentence */
  --text-label: 11px; --lh-label: 16px;
  --text-xs: 13px; --lh-xs: 18px; /* meta floor (Derek review): 13px in --mist, never --mist-2 */
  --text-sm: 14px; --lh-sm: 20px;
  --text-md: 15px; --lh-md: 22px;
  --text-lg: 18px; --lh-lg: 26px;
  --text-xl: 18px; --lh-xl: 26px;
  --text-2xl: 20px; --lh-2xl: 28px; /* a card's own headline */
  --title: 30px; --lh-title: 38px; /* page title: the screen's one headline */
  --metric: 28px; --lh-metric: 32px; /* every stat: quiet by default */
  --metric-lead: 56px; --lh-metric-lead: 60px; /* a number that leads a section */
  --metric-hero: 80px; --lh-metric-hero: 84px; /* the one number a view is about: Tracking, AI visibility */

  /* Spacing: an 8px grid. --space-1 and --space-3 are the half steps, for tight pairs inside a component. */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* Radius — v4 flat 12 */
  --r-sm: 6px; --r-md: 9px; --r-lg: 12px; --r-pill: 999px;
  --r: 12px;

  /* Layout — Derek sidebar: 220px labeled / 64px icon rail; Beams 200px / 48px (chevron only) */
  --rail-side: 220px;
  --rail-mini: 64px;
  --rail-icon: var(--rail-side); /* current sidebar width; html.rail-collapsed sets it to --rail-mini */
  --rail-beam: 200px;
  --rail-beam-mini: 48px;
  --rail-active: rgba(90, 138, 164, 0.16); /* soft navy fill under the active nav row */
  --topbar: 56px;
  --empty-pane: clamp(320px, 52vh, 520px); /* a Paro empty fills its pane instead of floating in a void */

  /* ---- Theme: Premium Abyss (default, SPEC §3) ---- */
  --surf: var(--navy-2);
  --surf2: var(--navy-3);
  --surf3: var(--navy-4);
  --surface-0: var(--abyss);
  --surface-1: var(--navy);
  --surface-2: var(--navy-2);
  --surface-3: var(--navy-3);
  --surface-4: var(--navy-4);
  --bg: var(--abyss);
  --bg-deep: #061525;
  --bg-mid: #0A1E30;
  --surface: var(--navy-2);
  --surface-raised: var(--navy-3);
  --foam-raised: var(--navy-2); /* legacy alias → flat panel */
  --ink: var(--foam-90);
  --mist: var(--foam-85);
  --mist-2: rgba(247, 244, 238, 0.55); /* labels only, never readable body */
  --foam-text: var(--foam);
  --line: rgba(247, 244, 238, 0.10);
  --line-strong: rgba(247, 244, 238, 0.14);
  --line-beam: rgba(245, 193, 74, 0.35);
  /* Solid content surfaces (cards, lists, KPIs, plan options, invoices): never blurred. */
  --card-solid: #123250;
  --card-solid-2: #173A5A;
  --shadow-1: none;
  --shadow-card: 0 8px 22px rgba(0, 0, 0, 0.28);
  --shadow-float: 0 10px 40px rgba(0, 0, 0, 0.48);
  --pos-soft: rgba(61, 155, 110, 0.18);
  --neg-soft: rgba(196, 91, 74, 0.18);
  --neu-soft: rgba(122, 135, 150, 0.18);
  --teal-soft: rgba(74, 112, 136, 0.18);
  --navy-wash: rgba(247, 244, 238, 0.05);
  --navy-hover: rgba(247, 244, 238, 0.05);
  --rail-bg: var(--glass-bg);
  --page-bg: linear-gradient(165deg, #0A1E30 0%, var(--abyss) 45%, #061525 100%);
  --card-bg: var(--card-solid);
  --kpi-bg: var(--card-solid);
  --seg-on: rgba(247, 244, 238, 0.10);
  --btn-primary-bg: var(--beam);
  --btn-primary-fg: var(--beam-ink);
  --mark: /brand/mark-light.svg;

  /* Liquid Glass (SPEC §3–4). Blur only on fixed chrome; max 3 blurred layers per view. */
  --glass-bg: rgba(10, 34, 56, 0.62);
  --glass-bg-strong: rgba(12, 38, 62, 0.80);
  --glass-blur: 20px;
  --glass-blur-strong: 28px;
  --glass-saturate: 140%;
  --glass-border: rgba(247, 244, 238, 0.10);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --glass-fallback: #0C2640;
  --glass-fallback-strong: #10304E;
  --glass-scrim: rgba(8, 26, 46, 0.78);
  --glass-scrim-strong: rgba(8, 26, 46, 0.88);
  --glass-mobile-solid: rgba(8, 26, 46, 0.94);
  --glass-danger: rgba(48, 18, 22, 0.72);

  /* Motion: 200–300ms ease-out (SPEC §5). prefers-reduced-motion zeroes travel below. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 200ms;
  --dur-2: 260ms;
}

/* Phones read everything a step larger; the two big numbers come down to fit the column. */
@media (max-width: 760px) {
  :root {
    --t-body: 16px; --t-body-lg: 17px;
    --text-sm: 15px; --lh-sm: 22px;
    --text-md: 16px; --lh-md: 24px;
    --title: 26px; --lh-title: 32px;
    --metric-lead: 48px; --lh-metric-lead: 52px;
    --metric-hero: 64px; --lh-metric-hero: 68px;
  }
}

/* Light Foam: <html data-theme="light"> (theme switch; see header). */
[data-theme="light"] {
  color-scheme: light;
  --bg: #F7F4EE;
  --bg-deep: #F7F4EE;
  --bg-mid: #F7F4EE;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --foam-raised: #FFFFFF;
  --surf: #FFFFFF;
  --surf2: #FFFFFF;
  --surf3: #F7F4EE;
  --ink: #001A2E;
  --mist: #3A4A5C;
  --foam-text: #F7F4EE;
  --line: #E4DFD6;
  --line-strong: #D2CBBE;
  --shadow-1: 0 1px 2px rgba(0, 26, 46, 0.06);
  --pos: #2F6B4F;
  --neg: #A33B2B;
  --neu: #6B7280;
  --pos-soft: rgba(47, 107, 79, 0.12);
  --neg-soft: rgba(163, 59, 43, 0.12);
  --neu-soft: rgba(107, 114, 128, 0.12);
  --teal-soft: rgba(74, 112, 136, 0.12);
  --navy-wash: rgba(0, 26, 46, 0.05);
  --navy-hover: rgba(0, 26, 46, 0.03);
  --rail-bg: var(--navy);
  --page-bg: var(--foam);
  --card-bg: var(--surface);
  --kpi-bg: var(--surface);
  --seg-on: var(--surface);
  --btn-primary-bg: var(--navy);
  --btn-primary-fg: var(--foam);
  --mark: /brand/mark-dark.svg;
  --rail-side: 220px;
  --mist-2: rgba(0, 26, 46, 0.45);
  --line-beam: rgba(184, 132, 20, 0.45);
  --card-solid: #FFFFFF;
  --card-solid-2: #FBF9F5;
  --shadow-card: 0 1px 2px rgba(0, 26, 46, 0.06), 0 6px 18px rgba(0, 26, 46, 0.05);
  --shadow-float: 0 12px 32px rgba(0, 26, 46, 0.14);
  --rail-bg: var(--navy);
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.90);
  --glass-border: rgba(0, 26, 46, 0.10);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --glass-fallback: #FFFFFF;
  --glass-fallback-strong: #FFFFFF;
  --glass-scrim: rgba(255, 255, 255, 0.82);
  --glass-scrim-strong: rgba(255, 255, 255, 0.92);
  --glass-mobile-solid: rgba(255, 255, 255, 0.96);
  --glass-danger: rgba(253, 236, 233, 0.92);
}

/* ---------- Liquid Glass utilities (SPEC §3) ----------
   .glass: sidebar, Beams rail, topbar, tab bar, billing hero + checkout panel.
   .glass-strong: Filters popover, menus, toasts. .glass-scrim: behind multi-line text on glass.
   Never on scrolling lists or cards (mention, opportunity, KPI, plan option, invoice rows). */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
          backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
}
.glass-strong {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%);
          backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%);
  border: 1px solid var(--line-strong);
}
.glass-scrim { background: var(--glass-scrim); border-radius: inherit; }
.glass-scrim.strong { background: var(--glass-scrim-strong); }

/* Fallbacks are !important so page rules (premium.css) can never out-rank them. */
/* Fallback 1: no backdrop-filter support. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-strong { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--glass-fallback) !important; }
  .glass-strong { background: var(--glass-fallback-strong) !important; }
}
/* Fallback 2: the user asked for less transparency. */
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass-strong { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--glass-fallback) !important; }
  .glass-strong { background: var(--glass-fallback-strong) !important; }
}
/* Fallback 3: low-end mobile (touch, ≤640px): solid translucent navy, never blur a list. */
@media (max-width: 640px) and (hover: none) {
  .glass, .glass-strong, .topbar, .tabbar {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--glass-mobile-solid) !important;
  }
  .feed, .opp-list, .invoice-list, .card, .mention-card, .plan-option, .mention, .opportunity {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
}
/* Light theme keeps the approved solid navy sidebar in every mode (fallbacks included). */
[data-theme="light"] .rail.glass { background: var(--navy) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }