/*
 * tokens.css — the ONLY file in docs/validation/landing-page/ permitted to
 * contain a colour literal or a pixel literal (SPEC-002, plan 01-02).
 *
 * Two layers: primitive (raw values) -> semantic (what feature code
 * consumes). styles.css must reference semantic tokens via var() only.
 *
 * Contrast ratios below are computed against WCAG 2.x relative luminance
 * (sRGB -> linearised channel -> L = 0.2126R + 0.7152G + 0.0722B, then
 * (L1 + 0.05) / (L2 + 0.05) with L1 the lighter of the pair). Recorded here
 * so a later reader does not have to re-derive them from the hex values.
 */

:root {
  /* ---------- Primitives ---------- */

  /* Ink (near-black, warm-neutral, never pure #000 so it reads as ink, not print) */
  --primitive-ink-900: #14181c;
  --primitive-ink-700: #3a4048;

  /* Paper */
  --primitive-paper-0: #ffffff;
  --primitive-paper-50: #f7f5f2;

  /* Accent — a deep, calm green. Chosen for the "settled, not urgent" tone
     PRD-003 asks for; never reused for a decorative purpose beyond the
     primary action. */
  --primitive-accent-600: #2f5233;
  --primitive-accent-700: #223d27;

  /* Border */
  --primitive-line-200: #d9d4cc;

  /* Status (used only for the honest, non-alarming error state on the
     consent requirement — never decorative, per SPEC-002 "never encode
     meaning in colour alone" the error also carries text) */
  --primitive-status-danger-700: #8a2c22;

  /* Spacing — 4pt base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* Type */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-size-caption: 15px;
  --font-size-secondary: 15px;
  --font-size-body: 17px;
  --font-size-body-large: 19px;
  --font-size-heading: 28px;
  --font-size-display: 34px;
  --font-weight-body: 400;
  --font-weight-heading: 600;
  --line-height-body: 1.6;
  --line-height-heading: 1.25;

  /* Touch targets — SPEC-002 hard floor */
  --touch-target-min: 48px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;

  /* Border, focus ring and off-canvas dimensions — kept as tokens so
     styles.css never carries a bare pixel literal (SPEC-002). */
  --border-width-hairline: 1px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --offscreen-distance: -9999px;
  --hitarea-hidden-size: 1px;

  /* Motion — respected only if prefers-reduced-motion allows it (styles.css) */
  --motion-fast: 120ms;
  --motion-base: 200ms;

  /* ---------- Semantic tokens (feature code consumes only these) ---------- */

  --color-surface: var(--primitive-paper-0);
  --color-surface-raised: var(--primitive-paper-50);

  /* body text on surface: #14181c on #ffffff, measured contrast 17.84:1 */
  --color-text-body: var(--primitive-ink-900);

  /* heading text on surface: same ink value, bolder weight carries the
     hierarchy instead of colour; measured contrast 17.84:1 */
  --color-text-heading: var(--primitive-ink-900);

  /* secondary/caption text on surface: #3a4048 on #ffffff, measured
     contrast 10.46:1 */
  --color-text-secondary: var(--primitive-ink-700);

  --color-border-subtle: var(--primitive-line-200);

  /* primary action background: #2f5233 */
  --color-action-bg: var(--primitive-accent-600);
  --color-action-bg-pressed: var(--primitive-accent-700);

  /* primary action label on action background: #ffffff on #2f5233,
     measured contrast 8.84:1 */
  --color-action-label: var(--primitive-paper-0);

  /* error text on surface: #8a2c22 on #ffffff, measured contrast 8.52:1 */
  --color-status-danger: var(--primitive-status-danger-700);
}