/* Design tokens. Three layers: primitives → semantic → component. Brand via [data-brand], theme via [data-theme].
   Contrast adjustments from the supplied Splendid palette (documented in docs/design-system.md):
   - White text on #F70B87 is 3.92:1, so text-bearing fills use --accent-fill #C9046A (5.66:1). #F70B87 stays for
     emphasis, indicators and large display text.
   - Secondary text #6F748A on #F7F8FC is 4.36:1, darkened to #5C6178 (5.76:1).
   - Input/button borders (--border-strong) and the focus ring are >= 3:1 against their surface in every theme.
   Ratios are computed with the WCAG formula (docs/design-system.md has the full table). */

@font-face { font-family: "Space Grotesk"; src: url("/static/shared/fonts/SpaceGrotesk-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/static/shared/fonts/DMSans-var.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/static/shared/fonts/Inter-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --radius-s: 6px; --radius-m: 10px; --radius-l: 14px; --radius-pill: 999px;
  --fs-xs: 0.75rem; --fs-s: 0.8125rem; --fs-m: 0.9375rem; --fs-l: 1.0625rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.5rem;
  --lh-tight: 1.2; --lh: 1.5;
  --touch: 44px;
  --sidebar-w: 248px; --topbar-h: 60px; --drawer-w: 480px;
  --dur: 160ms; --ease: cubic-bezier(.2,.7,.2,1);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- Splendid: midnight navy + magenta, light operational workspace ---------- */
[data-brand="splendid"] {
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --navy-900: #070B1B; --navy-800: #0B1026; --navy-700: #121833;
  --magenta: #F70B87; --magenta-pressed: #E30578; --magenta-fill: #C9046A; --magenta-soft: #FFF0F8;
  --purple: #8262E8; --blue: #319CEB; --cyan: #1CBFD0;

  --page: #F7F8FC; --card: #FFFFFF; --card-2: #F2F4FA; --border: #E8EAF1; --border-strong: #8389A3;
  --text: #0B1026; --text-2: #5C6178; --text-on-accent: #FFFFFF;
  --accent: var(--magenta); --accent-fill: var(--magenta-fill); --accent-fill-hover: #B00360; --accent-soft: var(--magenta-soft); --accent-text: #B5045F;
  --sidebar-bg: var(--navy-800); --sidebar-text: #C9CEE3; --sidebar-text-strong: #FFFFFF; --sidebar-active-bg: rgba(247,11,135,.16); --sidebar-border: #1B2242;
  --positive: #0A7349; --positive-soft: #E5F7EF; --warning: #8A5A00; --warning-soft: #FFF4DB; --error: #C4183C; --error-soft: #FDE9ED; --info: #1769AA; --info-soft: #E6F2FC;
  --focus: #1F6FB5; --focus-on-dark: #6DB8F2; --shadow: 0 1px 2px rgba(11,16,38,.06), 0 4px 16px rgba(11,16,38,.06); --overlay: rgba(7,11,27,.55);
}
[data-brand="splendid"][data-theme="dark"] {
  --page: #070B1B; --card: #121833; --card-2: #0B1026; --border: #232B52; --border-strong: #6C78B5; --focus: #6DB8F2;
  --text: #F2F4FB; --text-2: #A9B0CC;
  --accent-fill: #C9046A; --accent-fill-hover: #D90A78; --accent-soft: rgba(247,11,135,.14); --accent-text: #FF7CC0;
  --sidebar-bg: #050817; --sidebar-border: #151B38;
  --positive: #4ADE9E; --positive-soft: rgba(22,184,122,.16); --warning: #F7C04A; --warning-soft: rgba(243,167,18,.16);
  --error: #FF7A92; --error-soft: rgba(234,49,85,.18); --info: #7CC1F5; --info-soft: rgba(49,156,235,.16);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); --overlay: rgba(0,0,0,.65);
}

/* ---------- Torvara: "Trusted to Transform" — evergreen, warm ivory, ink, sage and restrained teal ----------
   Oct 2, 2026 (Sam's approved brand board, handed over with the UI-only prompt): the copper theme is superseded. The five brand
   colours are exact: evergreen #153C34 (identity), ivory #F6F5F0 (canvas), ink #17211E (text), sage #A8B8AA (support, never normal
   text on ivory), teal #147D78 (actions). Layout, spacing and sizes are untouched; only colour changed.
   Checked with the WCAG formula on the real pairs: ink on ivory 15.1, secondary text on ivory 6.1 (5.6 on the selected tint), link
   5.8, ivory on the teal button 4.5 (5.8 hover, 7.5 pressed), control border on ivory 3.6; dark: ivory on page 16.7, secondary 10.6,
   dark ink on the light-teal button 8.7, control border 4.1. Status colours keep their own families (green, amber, red, blue). */
[data-brand="torvara"] {
  --font-display: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --brand: #153C34; --sage: #A8B8AA; --teal: #147D78;
  --brand-mark: var(--brand);                         /* the menu marker, tab underline and wordmark: evergreen on light */
  --page: #F6F5F0; --card: #FFFFFF; --card-2: #EEF2EE; --border: #D8E0D9; --border-strong: #71867B;
  --text: #17211E; --text-2: #4D6158; --text-on-accent: #F6F5F0;
  --accent: var(--teal); --accent-fill: #147D78; --accent-fill-hover: #106B67; --accent-fill-pressed: #0C5955; --accent-soft: #E2EEEA; --accent-text: #106B67;
  --accent-grad: var(--accent-fill); --accent-grad-nav: var(--brand);          /* solid: no gradient or overlay on the teal button (little contrast headroom) */
  --mark-grad: linear-gradient(135deg, #2C6A5B, #153C34 60%, #0F2C26); --mark-ink: #F6F5F0;
  --chart-0: var(--brand);                            /* first chart series: evergreen, so it never reads as the green "good" or the blue "info" series */
  --sidebar-bg: #153C34; --sidebar-text: #C9D6CE; --sidebar-text-strong: #FFFFFF; --sidebar-active-bg: rgba(132,203,194,.22); --sidebar-border: #24503F; --sidebar-card: #1A4439;
  --positive: #1F6F4A; --positive-soft: #E2F0E8; --warning: #7F5200; --warning-soft: #F8EDD3; --error: #A8261E; --error-soft: #F9E7E5; --info: #2A5B83; --info-soft: #E5EDF4;
  --focus: #147D78; --focus-on-dark: #84CBC2; --shadow: 0 1px 2px rgba(23,33,30,.06), 0 6px 20px rgba(23,33,30,.07); --overlay: rgba(13,23,20,.58);
}
[data-brand="torvara"][data-theme="dark"] {
  --brand-mark: #84CBC2;                              /* evergreen disappears on a dark page (1.5:1); the marker is the light teal there */
  --page: #0D1714; --card: #14221D; --card-2: #1C2E26; --border: #30483C; --border-strong: #637D6E;
  --text: #F6F5F0; --text-2: #BBC9C0; --text-on-accent: #10251F;
  --accent: #84CBC2; --accent-fill: #84CBC2; --accent-fill-hover: #A0DBD3; --accent-fill-pressed: #6CB6AE; --accent-soft: rgba(132,203,194,.16); --accent-text: #A0DBD3;
  --accent-grad-nav: #1C2E26; --mark-grad: linear-gradient(135deg, #2C6A5B, #153C34 60%, #0F2C26);
  --chart-0: #4DB8AE;
  --sidebar-bg: #0A120F; --sidebar-border: #24382E; --sidebar-card: #111D18;
  --positive: #72CFA0; --positive-soft: rgba(31,111,74,.24); --warning: #E6BC62; --warning-soft: rgba(127,82,0,.28);
  --error: #FF8F85; --error-soft: rgba(168,38,30,.26); --info: #93C0E4; --info-soft: rgba(42,91,131,.28);
  --focus: #84CBC2; --shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 28px rgba(0,0,0,.38); --overlay: rgba(0,0,0,.68);
}