/*
 * The ONLY file in web/src with colour, type, space, radius and elevation values (spec §5.1, F15 §2.9).
 * scripts/check-tokens.mjs fails the lint if a literal colour appears anywhere else, so a brand change is a
 * diff here and nowhere else. Names are semantic, never the colour: --color-danger, not --color-red.
 *
 * Contrast (measured for every pair the components use, both themes): text on bg/surface/raised >= 4.5:1,
 * each -fg on its colour >= 4.5:1, each state colour on its -subtle >= 4.5:1, border and focus ring on
 * every surface >= 3:1. The design-system kit page renders the pairs with the ratio computed in the browser.
 */
:root {
  color-scheme: light;

  --color-ink: #0e0e10;
  --color-bg: #fafaf7;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-border: #868f9d;
  --color-text: #0e0e10;
  --color-text-muted: #5b5b63;
  --color-text-inverted: #ffffff;

  --color-primary: #2b45f5;
  --color-primary-fg: #ffffff;
  --color-primary-hover: #1a2fc0;
  /* F24a §1: the pale cobalto behind the "3/3 pontas" selo; text on it is --color-primary-hover (7,95:1). */
  --color-primary-subtle: #e6eaff;
  /* Only on --color-ink (the dark block of the landing, the seal): never text on a light surface. */
  --color-accent-bright: #8c9bff;
  /* F24a §1: secondary text INSIDE the dark block (Parceiros); --color-text-muted on --color-ink reads too dark. */
  --color-text-on-ink-muted: #b9b9c2;
  /* F24a §1: decorative table rule ONLY (1,23:1 on purpose, below the 3:1 floor) — never a field border. */
  --color-rule-subtle: #e4e3dd;
  /* F24a §1: the old ring (#2563a8) sits at 1,05:1 of the new cobalt primary and all but disappears on it; ink
     resolves it, drawn OUTSIDE the control (outline-offset: 3px) so it is measured against the ground, not the
     control's own colour. */
  --color-focus-ring: #0e0e10;
  /* F24a §1: inside the dark block (Parceiros) the ink ring would vanish on ink; this is the one used there. */
  --color-focus-ring-inverse: #fafaf7;

  /* F24a §6, darkened in F27a §9.2 (rim, graticule and the three dot tiers; the disc, its edge and the shade are the
     F24a ones): the globe (landing and login only; never a literal in the SVG — classes read these). */
  --color-globe-disc: #ffffff;
  --color-globe-disc-edge: #eef0fa;
  --color-globe-rim: #c9ceea;
  --color-globe-graticule: #dde1f2;
  --color-globe-dot-far: #b9c0e6;
  --color-globe-dot-mid: #8e98d4;
  --color-globe-dot-near: #6f79bd;
  --color-globe-shade: #b8bee0;

  /* F27a §9.2: the two audiences' landings. The supporting text, the faint ruler/placeholder, the soft rule, the
     alternate section, the simulation's ground, the client's bubble and the chat ground. Contrast is held by
     kit/contrast.test.ts (text-2 >= 4,5:1 on --color-bg and --color-surface-alt; the ink on the bubble >= 4,5:1). */
  --color-text-2: #4a4a52;
  --color-text-faint: #8a8a93;
  --color-rule-soft: #d6d4cc;
  --color-surface-alt: #f1f0ea;
  --color-surface-sim: #eef0fa;
  --color-bubble-out: #d9dfff;
  --color-chat-bg: #eceae3;

  --color-danger: #b1261d;
  --color-danger-fg: #ffffff;
  --color-danger-subtle: #fbeceb;
  --color-warning: #855500;
  --color-warning-fg: #ffffff;
  --color-warning-subtle: #fcf2df;
  /* Pulled to a yellower green in F22: #1d6b41 and #80cfa0 measured CIEDE2000 13,3 and 11,4 from the new primary
     (rule: at least 20 in each theme, kit/contrast.test.ts); these measure 21,8 and 22,7. docs/design.md. */
  --color-success: #3b6b1d;
  --color-success-fg: #ffffff;
  --color-success-subtle: #edf5e4;
  --color-info: #235d92;
  --color-info-fg: #ffffff;
  --color-info-subtle: #e7eff8;

  /* The overlay behind a dialog or sheet: the text colour at partial opacity, so it follows the theme. */
  --color-overlay: rgb(21 24 30 / 0.45);

  /* F24a §1/§4 (decisão [P2]): Schibsted Grotesk for titles and for ALL of the landing's text (--font-sans is
     shared with the portal and stays Geist, so the landing reads --font-display even for body copy). */
  --font-display: 'Schibsted Grotesk', 'Schibsted Grotesk Fallback', system-ui, sans-serif;
  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', 'IBM Plex Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Base 16px, so an input never triggers the iOS zoom. */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  /* F27a: the titles of the two path cards and of the price cards (between --text-2xl and the display scale). */
  --text-3xl: 2rem;
  /* The titles of the landing: on a computer, and at 400 px (F24a §4/§5.1, literal from the design spec).
     -1 is the hero h1 (78/40), -2 is a section h2 (72/36), -3 is the support-page/404 h1 and the final-call h2
     (64/36 — the "404 enorme" is a separate, one-off scale per §5.1, not this token). */
  --text-display-1: 78px;
  --text-display-2: 72px;
  --text-display-3: 64px;
  --text-display-1-sm: 40px;
  /* The hero h1 below 480 px: two lines at 400 px (gate of 2026-10-08). */
  --text-display-1-xs: 34px;
  /* The hero h1 from 75em, in the 560 px column: 3 lines from 1200 to 1920 px (68 px gave 4 at 1200). */
  --text-display-1-md: 66px;
  --text-display-2-sm: 36px;
  --text-display-3-sm: 36px;

  /* Base 4px: --space-1 = 4px ... --space-12 = 48px. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  /* F27a §8: the section rhythm of the two landings, 72 px (phone and tablet) and 112 px (desktop). */
  --space-18: 4.5rem;
  --space-28: 7rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  --shadow-sm: 0 1px 2px rgb(21 24 30 / 0.08);
  --shadow-md: 0 4px 12px rgb(21 24 30 / 0.12);

  /* Minimum touch target for every interactive control (spec §5.1). */
  --size-touch: 2.75rem;
  /* The phone's fixed bottom bar (BottomNav): its own height, without the safe-area inset. app.css reads it
     twice — the bar's min-height and, below its breakpoint, the page's scroll-padding-bottom (F22 emenda v1.9,
     achado a) — so the two never drift apart. */
  --size-bottom-nav: 3.5rem;
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --color-bg: #0e0e10;
  --color-surface: #151518;
  --color-surface-raised: #1c1c21;
  /* F24a §1: measured against all 3 dark surfaces componentPairs tests (docs/design.md); #707a8b already clears
     3:1 with margin on the new values (3,92:1 on --color-surface-raised, the tightest of the three — 4,20:1 on
     --color-surface, 4,45:1 on --color-bg), so it is kept rather than replaced. */
  --color-border: #707a8b;
  --color-text: #fafaf7;
  --color-text-muted: #b9b9c2;
  --color-text-inverted: #111318;

  --color-primary: #8c9bff;
  --color-primary-fg: #0b0d14;
  --color-primary-hover: #aab5ff;
  --color-focus-ring: #fafaf7;

  --color-danger: #f1998f;
  --color-danger-fg: #1b0d0b;
  --color-danger-subtle: #3a1d1a;
  --color-warning: #e6b766;
  --color-warning-fg: #1c1405;
  --color-warning-subtle: #382b14;
  --color-success: #a3d977;
  --color-success-fg: #0b1a12;
  --color-success-subtle: #1f2f16;
  --color-info: #8ebbe7;
  --color-info-fg: #0c1623;
  --color-info-subtle: #172a3d;

  --color-overlay: rgb(0 0 0 / 0.6);

  /* F27a §9.2, dark values chosen and measured by Wren (kit/contrast.test.ts): the landings are light only, so these
     serve the portal's dark theme should a landing component ever render there. The globe tokens stay as they are. */
  --color-text-2: #d3d3da;
  --color-text-faint: #8a8a93;
  --color-rule-soft: #2e2e35;
  --color-surface-alt: #17171b;
  --color-surface-sim: #1b1d2e;
  --color-bubble-out: #2c3470;
  --color-chat-bg: #131316;

  /* In the dark theme elevation comes from the lighter surface, not from a shadow (spec §5.1). */
  --shadow-sm: none;
  --shadow-md: none;
}