/* Design tokens for the "granite coast" direction — see docs/DESIGN.md.
   Everything else in the CSS reads tokens only, so changing the look is a
   change to this file. */

:root {
  color-scheme: light dark;

  /* Colour: neutrals tinted blue-granite (250), warm stone (95) for bg/surface. */
  --bg:        light-dark(oklch(0.96 0.008 95),  oklch(0.19 0.012 250));
  --surface:   light-dark(oklch(0.99 0.004 95),  oklch(0.24 0.012 250));
  --surface-2: light-dark(oklch(0.93 0.01 95),   oklch(0.28 0.012 250));
  --line:      light-dark(oklch(0.24 0.02 250 / 14%), oklch(0.95 0.006 95 / 16%));
  --ink:       light-dark(oklch(0.24 0.02 250),  oklch(0.95 0.006 95));
  --ink-2:     light-dark(oklch(0.4 0.02 250),   oklch(0.82 0.01 95));
  --muted:     light-dark(oklch(0.52 0.015 250), oklch(0.68 0.012 95));

  /* One accent — the beacon — on at most three element types (mark, links, toggle hover). */
  --accent:       light-dark(oklch(0.62 0.16 35), oklch(0.68 0.17 35));
  --accent-ink:   oklch(0.99 0.004 95);
  --accent-hover: light-dark(oklch(0.56 0.17 35), oklch(0.73 0.16 35));

  /* State colours are not decoration: they encode meaning only. */
  --ok:     light-dark(oklch(0.5 0.1 150),  oklch(0.75 0.13 150));
  --warn:   light-dark(oklch(0.65 0.14 75), oklch(0.8 0.14 75));
  --danger: light-dark(oklch(0.55 0.17 25), oklch(0.72 0.16 25));

  /* Radius is a hierarchy tool: used only on the language toggle and focus rings. */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;

  /* Elevation via luminance steps, never shadows. One hairline only. */
  --hairline: 1px solid var(--line);

  /* Space (rem) */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 7rem;

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-s: .875rem;
  --text-m: 1rem;
  --text-l: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.5rem;
  --text-3xl: clamp(2.5rem, 6vw, 4.25rem);
  --leading-tight: 1.05;   /* display lines; keeps Å/Ä rings from colliding */
  --leading-body: 1.55;

  --measure: 62ch;
  --content-width: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* Fallback for browsers without oklch(): approximate sRGB values. */
@supports not (color: oklch(0 0 0)) {
  :root {
    --bg: #f2efe9; --surface: #fdfcfa; --surface-2: #e8e4da; --line: #d8d3c8;
    --ink: #232436; --ink-2: #4a4c63; --muted: #6f7189;
    --accent: #b8542f; --accent-ink: #fdfcfa; --accent-hover: #a24a29;
    --ok: #2f7d5b; --warn: #c2872e; --danger: #b8432f;
  }
}