/*
 * Þrift design tokens for the web — brand v4 "Skýr" (D-22, 2026-08-17; page grey
 * amended by ASK-7, 2026-09-08). Values are copied from
 * `docs/design/brand-reference-v3.html` and match `apps/mobile/src/theme/tokens.ts`
 * name for name, so the site and the app cannot drift apart.
 *
 * THIS IS THE ONLY FILE ON THE SITE THAT MAY CONTAIN A HEX VALUE — the same rule
 * CLAUDE.md sets for the app's screens. `test/site.test.mjs` fails the build if a
 * colour appears anywhere else.
 */

:root {
  /* Ink & accent */
  --ink: #16211F;
  --ink-2: #4A5654;
  --muted: #7E8A88;
  --muted-icon: #9DA8A6;
  /* Web-only darkenings of the two tints above. The brand's own --muted reaches
     3.05:1 on the page ground and --tan 4.40:1 on its own, which is under AA for
     the small type this site sets them in (labels, captions, footer links). Same
     hue family, one step down in lightness, ≥4.5:1 — the app's tokens are
     unchanged, since the app sets them larger and lighter-on-darker. */
  --muted-text: #616D6B;
  /* An achromatic tint between --border and --muted-icon: the fabric's fine
     lines on the stone (C16.1). */
  --mark-tint: #C3CECC;
  /* The same field one step deeper, for when it is under the pointer. */
  --mark-tint-hover: #B3BFBD;
  --accent: #2F5D63;
  --accent-pressed: #234A4F;
  --accent-deep: #18343A; /* hero gradient tail — c8.mjs heroCard */

  /* Surfaces & stone */
  --page: #EAEEED;
  --card: #FFFFFF;
  --chip: #EFF3F2;
  --chip-alt: #E7ECEB;
  --border: #DDE4E3;
  --accent-bg: #E6EDEC;

  /* Tan/stone accents */
  --tan: #8A6A3A;
  --tan-text: #7F6134;
  --tan-bg: #F5F0E6;
  --badge-tan: #C9B89A;

  /* On-dark text over the teal hero */
  --on-dark: #FFFFFF;
  --on-dark-soft: rgba(255, 255, 255, 0.74);
  --on-dark-faint: rgba(255, 255, 255, 0.68);
  --on-dark-pill: rgba(255, 255, 255, 0.14);
  --on-dark-hairline: rgba(255, 255, 255, 0.22);

  /* Shadow — elevation.card / the hero's deeper drop */
  --shadow-card: 0 3px 10px rgba(22, 33, 31, 0.08);
  --shadow-hero: 0 18px 40px -18px rgba(22, 33, 31, 0.4);

  /* Typography — SF Pro (system) owns display, Inter owns everything functional.
     No serif anywhere: the v2 Fraunces system is superseded. */
  /* Inter sits ahead of the platform sans on purpose: off Apple's platforms the
     display line would otherwise render in Segoe UI or Roboto, faces the brand
     never chose, while the brand's own text face is already self-hosted here. */
  --font-display: -apple-system, "SF Pro Display", "SF Pro Text", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;

  /* Radius */
  --radius-sm: 6px;
  --radius-chip: 14px;
  --radius-md: 18px;
  --radius-lg: 20px;
  --radius-xl: 22px;
  --radius-hero: 30px;
  --radius-card: 32px;
  --radius-pill: 999px;
  --radius-rule: 2px;

  /* Spacing — 4px base scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 48px;
  --space-5xl: 64px;

  /* Borders */
  --hairline: 0.5px;
  --border-thin: 1px;

  /* Layout */
  --measure: 1040px;    /* page column */
  --measure-text: 66ch; /* reading width for long copy */
  --gutter: 32px;       /* one side padding for every page region */
}

/* The gutter tightens on a phone; nothing else about the scale changes. */
@media (max-width: 720px) {
  :root {
    --gutter: 20px;
  }
}