/* Vectoria Predictiva demo B: the ONE token layer. Every page and every rule in styles.css reads
   from these variables; no hex, px or timing lives anywhere else.
   Anchor: kami (editorial paper system) re-pointed to the Vectoria logo:
     brand teal #00A0B4 (graphics only: fails text contrast on paper) -> teal ink #00707F for text/actions
     brand brown #54483A -> secondary ink
   Ratios are measured by the gates (validate step), not asserted here. */
/* Type: Space Grotesk (display) + IBM Plex Sans (body, UI) + JetBrains Mono (labels, data). Variable fonts;
   latin-ext faces carry a unicode-range and are declared last, so they win only for their glyphs and a
   Spanish page downloads only the latin files. The latin faces have no range so the head preloads match them. */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/space-grotesk-var-latin.woff2") format("woff2"); } /* ds-allow-hardcode: @font-face must name the family it declares */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/space-grotesk-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ds-allow-hardcode: @font-face must name the family it declares */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/ibm-plex-sans-var-latin.woff2") format("woff2"); } /* ds-allow-hardcode: @font-face must name the family it declares */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/ibm-plex-sans-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ds-allow-hardcode: @font-face must name the family it declares */
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/jetbrains-mono-var-latin.woff2") format("woff2"); } /* ds-allow-hardcode: @font-face must name the family it declares */
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/jetbrains-mono-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ds-allow-hardcode: @font-face must name the family it declares */

:root {
  /* primitives */
  --paper-50: #FAF9F5;
  --paper-100: #F5F4ED;
  --paper-200: #ECEAE0;
  --paper-300: #E2DFD2;
  --ink-900: #17140F;
  --ink-700: #3D3832;
  --brown-600: #54483A;
  --stone-500: #66615A;
  --teal-400: #00A0B4;
  --teal-700: #00707F;
  --teal-800: #005A66;
  --teal-50: #E3EFEF;
  --red-700: #A3271F;
  --white: #FFFFFF;
  --navy-900: #0F1726; /* sampled from the owl scene's studio backdrop, so the hero band and the film meet without a seam */

  /* semantic: surfaces */
  --color-bg: var(--paper-100);
  --color-surface: var(--paper-50);
  --color-surface-sunken: var(--paper-200);
  --color-border: var(--paper-300);
  --color-border-strong: #CFCABA;

  /* semantic: text (four levels, no fifth) */
  --color-text: var(--ink-900);
  --color-text-secondary: var(--brown-600);
  --color-text-muted: var(--ink-700);
  --color-text-faint: var(--stone-500);

  /* semantic: action (by intent) */
  --color-action: var(--teal-700);
  --color-action-hover: var(--teal-800);
  --color-action-on: var(--white);
  --color-action-tint: var(--teal-50);
  --color-link: var(--teal-700);
  --color-focus: var(--teal-700);
  --color-error: var(--red-700);

  /* semantic: graphics (non-text) */
  --color-graphic-accent: var(--teal-400);
  --color-graphic-muted: var(--brown-600);
  --color-graphic-grid: var(--paper-300);

  /* type */
  --font-display: "Space Grotesk", "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --font-sans: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --tracking-mono: 0.02em;
  --text-xs: 0.78rem;
  --text-sm: 0.9rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.6rem;
  --text-2xl: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
  --text-display: clamp(2.75rem, 1.6rem + 4.2vw, 4.4rem);
  --text-figure: clamp(5rem, 3rem + 9vw, 9.5rem);
  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-body: 1.55;
  --measure: 62ch;
  --measure-display: 22ch;

  /* space: 4px rhythm */
  --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;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-section: clamp(4.5rem, 3rem + 7vw, 9rem);
  --space-footer: clamp(1.25rem, 0.5rem + 3vw, 4rem); /* footer margin; scales with the section rhythm */
  --space-footer-pad: clamp(3rem, 2rem + 2vw, 4rem);
  --gutter: clamp(1.25rem, 0.8rem + 2.4vw, 3rem);
  --container: 76rem;

  /* geometry: radius varies with size */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --hairline: 1px;
  --rule-strong: 2px;
  --focus-width: 2px;
  --focus-offset: 3px;
  --nudge: 3px;
  --target-min: 44px;
  --input-font: 16px; /* 16px stops iOS Safari zooming on focus */

  /* media sizes */
  --size-mark: 34px;
  --size-logo-footer: 96px;
  --size-ods: 64px;
  --size-ref-logo: 112px;
  --text-chart: 24px; /* SVG tick labels in viewBox units: ~12px rendered on a 390px phone */
  --size-icon-tile: 3.5rem;
  --size-icon-tile-lg: 5rem;
  --size-film-toggle: 44px;
  --size-film-badge: clamp(4.5rem, 22%, 7rem);
  --color-film-bg: var(--navy-900);
  --color-focus-inverse: var(--teal-400); /* focus ring on the navy film: the ink teal measures 2.97:1 there */
  /* hero band: the owl scene full bleed, copy on navy */
  --color-film-text: var(--paper-50);
  --color-film-text-muted: var(--paper-300);
  --color-film-accent: var(--teal-400);
  --color-film-action: var(--teal-400);
  --color-film-action-hover: var(--paper-50);
  --color-film-action-on: var(--ink-900);
  --mask-solid: #000; /* mask-image reads only alpha; this is the opaque stop */
  --size-hero-band: clamp(36rem, 100svh - 4.5rem, 50rem);
  --measure-hero: 36rem;
  --measure-hero-wide: min(36rem, 46vw); /* desktop: the copy column ends before the owl at 1024 */
  --film-w-max: 74%;
  --film-fade: 30%; /* left edge feather on desktop, bottom edge on phones */
  --film-fade-y: 10%;
  --film-badge-x: 38%; /* desktop: beside the owl's feet, clear of the copy column */
  --scale-film-in: 1.06;
  --dur-film-in: 1600ms;
  --text-giant: min(11rem, 17vw);
  --space-stack: clamp(1.5rem, 10vh, 6rem); /* sticky scroll room between VEP cards */
  --space-stack-dwell: clamp(2rem, 6vh, 4rem); /* room above the closing note while the deck is stacked */
  --size-stack-letter: calc(var(--text-figure) * 0.9); /* fixed letter column: text no longer shifts per glyph */
  --stack-top: calc(var(--space-16) + var(--space-6));
  --stack-step: var(--space-3);
  --scale-recede: 0.94;
  --rise-giant: 0.15em; /* the row below sits at least this far away, so the rise never crosses it */
  --stagger-giant: 60ms;
  --dur-rise: 900ms;
  --dur-page: 280ms;

  /* depth: ring and whisper only */
  --ring: 0 0 0 1px var(--color-border);
  --whisper: 0 4px 24px rgba(23, 20, 15, 0.06);

  /* motion */
  --dur-fast: 140ms;
  --dur-base: 200ms; /* baseline-ui: interaction feedback <= 200ms */
  --dur-draw: 1600ms;
  --dur-spin: 800ms;
  --ease-out: ease-out; /* baseline-ui: platform easing, no custom curves */
}