/* ViewsMeet design tokens: the one place for colours, type, spacing, radii and shadows.
   Every page loads this before styles.css. The direction comes from docs/design/reimagined-reference.html
   (cream and warm-white surfaces, ink text, coral then cobalt accents, serif display with sans UI,
   tactile pressed shadows). Where a reference colour failed WCAG AA it is darkened here; the pairs
   and ratios are pinned in tests/discovery/design-tokens.test.ts. world.css keeps its own fallbacks
   so it can render without this file. */

/* Self-hosted Google Fonts (latin subset, woff2, SIL OFL 1.1: /fonts/*-OFL.txt). Provenance is in
   fonts/README.md. They are the same families the share and Test Lab images are rendered with.
   Every page preloads the two upright files; font-display: optional means a late font never swaps in
   and shifts the layout (it is used from the cache on the next page instead). */
@font-face{font-family:Arimo;font-style:normal;font-weight:400 700;font-display:optional;src:url(/fonts/arimo-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Gelasio;font-style:normal;font-weight:400 700;font-display:optional;src:url(/fonts/gelasio-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Gelasio;font-style:italic;font-weight:400 700;font-display:optional;src:url(/fonts/gelasio-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* surfaces (light is the default theme) */
  --cream:#faf7f2;--cream-deep:#f2ece1;--surface:#fffdf9;
  /* text and borders: warm borders divide, ink borders mark controls */
  --ink:#181715;--muted:#5c5852;--border-warm:#e4ddd0;--border-strong:var(--ink);
  /* accents: every one passes 4.5:1 as text on every light surface and under white text.
     Reference coral #e84a27 (3.61:1 on cream) and amber #c87a00 (3.15:1) are darkened in hue. */
  --coral:#ba3819;--coral-soft:#fff0ec;
  --cobalt:#2347d5;--cobalt-soft:#edf1ff;
  --emerald:#137347;--emerald-soft:#e8f6ee;
  --amber:#8f5500;--amber-soft:#fff6e5;
  --violet:#6b38d4;--violet-soft:#f3eeff;
  --danger:#b83b4b;--danger-soft:#ffe1e3;
  --on-accent:#ffffff;
  /* WhatsApp share buttons: the brand's light green, always with ink text */
  --whatsapp:#9fea74;
  --link:var(--cobalt);--focus:var(--cobalt);
  /* dark treatment: only the share receipt uses it (setkernel/viewsmeet#5) */
  --night:#141413;--night-surface:#1f1e1c;--on-night:#faf7f2;--on-night-muted:#b5afa6;
  /* the receipt's two accents: coral and cobalt lightened to pass 4.5:1 on the dark surfaces */
  --on-night-coral:#ff8a65;--on-night-cobalt:#9fb4ff;
  /* older names, pointed at the palette above until the pages that use them are redesigned */
  --paper:var(--cream);--paper-2:var(--surface);--white:var(--surface);--line:var(--ink);
  --lime:var(--coral-soft);--lime-soft:var(--emerald-soft);--aqua:var(--cobalt-soft);--aqua-soft:var(--cobalt-soft);
  /* Test Lab stimuli: the colour-conflict task's four inks, the same values stroop-test.js reports.
     They belong to the task, not the palette, so a redesign never retunes them (setkernel/viewsmeet#9). */
  --stimulus-red:#d7463f;--stimulus-blue:#2767d8;--stimulus-green:#18865b;--stimulus-purple:#7559f2;

  /* type: serif display, sans UI; body text never below --text-base */
  --sans:Arimo,sans-serif;--serif:Gelasio,serif;
  --text-sm:14px;--text-base:16px;--text-lg:18px;--text-xl:22px;
  --display-sm:clamp(26px,4vw,30px);--display-md:clamp(30px,5vw,40px);--display-lg:clamp(34px,4.5vw,52px);
  --display-hero:clamp(44px,6.4vw,84px);--display-hero-sm:clamp(38px,11vw,56px);
  --weight-ui:700;--tracking-display:-.02em;--tracking-caps:.06em;

  /* spacing: page containers are min(<width>, 100% - --page-inset) */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;
  --space-gutter:clamp(var(--space-5),5vw,var(--space-8));
  --page-inset:28px;--page-max:1180px;--tap:44px;

  /* radii */
  --radius-xs:4px;--radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius:var(--radius-lg);--radius-pill:999px;

  /* shadows: the tactile shadow sits straight below a control; pressing it moves the control down
     onto the shadow (--press-depth) */
  --shadow-press-sm:0 2px 0 var(--ink);--shadow-press:0 3px 0 var(--ink);--shadow-press-lg:0 4px 0 var(--ink);
  --shadow-pressed:0 1px 0 var(--ink);--press-depth:2px;
  --shadow-soft:0 12px 32px rgb(24 23 21 / 7%);
  /* older offset names, smallest to largest */
  --shadow-xs:var(--shadow-press-sm);--shadow-sm:var(--shadow-press-sm);--shadow-md:var(--shadow-press);
  --shadow-lg:var(--shadow-press-lg);--shadow-xl:var(--shadow-press-lg);--shadow:var(--shadow-press-lg);--shadow-xxl:0 5px 0 var(--ink);
}
@media(prefers-contrast:more){:root{--muted:#403b36;--border-warm:#8c857b;--coral:#9e2f14;--violet:#5428b8;--cobalt:#1b38aa}}