/* FranCesc & Cescju · design tokens v1.0 (2026-10-10)
   Contrast ratios (WCAG 2.x), computed by the design lead:
   LIGHT  text #24221E      on surface 14.11 · raised 15.51 · sunken 12.58
          muted #57524A     on surface  6.89 · raised  7.56 · sunken  6.14
          accent #3D5C46    on surface  6.62 · raised  7.28 · sunken  5.90
          accent-hover      on surface  9.30 · on-accent #FFFCF6 on accent 7.28 / on hover 10.21
          brass-text #7A5717 on surface 5.83 · raised 6.40 · sunken 5.19
          focus #8A4B1F     on surface  6.01 · sunken 5.35   (UI needs 3:1)
          border-strong     on surface  3.62 · sunken 3.23   (UI needs 3:1)
          brass #B08A3E is DECORATIVE ONLY (2.85:1): rules, bullets, never text or UI edges.
          <meta name="theme-color"> in each page is the one literal colour allowed outside this file: a meta cannot read a custom property (keep #F6F1E8 / #161B19 in sync with surface).
          night-border #6B7A74 on night #1C2321 3.55 · on dark-mode night #222B28 3.23   (UI needs 3:1)
   NIGHT  night-text #EDE7DB on night #1C2321 13.00 · muted #BDB5A6 7.87 · accent #A8C7AF 8.73
          focus-night #E8B872 on night 8.79 · on-night-accent #13201A on #A8C7AF 9.17
   DARK   text #EDE7DB on surface 14.15 · raised 12.54 · sunken 14.95
          muted #B9B1A2 on surface 8.19 · raised 7.26 · accent #9CC0A5 on surface 8.71 · raised 7.72
          on-accent #13201A on accent 8.40 / on hover 10.84 · focus #E8B872 on surface 9.57
          brass-text #D9B86A on surface 9.14 · border-strong #7C8580 on surface 4.58
          night band in dark mode #222B28: text 11.81 · muted 7.15 · accent 7.93 · focus 7.98 */

:root {
  color-scheme: light dark;

  /* Colour: forest moss, river stone, paper, bowl brass */
  --color-surface: #F6F1E8;
  --color-surface-raised: #FFFCF6;
  --color-surface-sunken: #ECE4D6;
  --color-text: #24221E;
  --color-text-muted: #57524A;
  --color-accent: #3D5C46;
  --color-accent-hover: #2C4534;
  --color-on-accent: #FFFCF6;
  --color-brass: #B08A3E;
  --color-brass-text: #7A5717;
  --color-border: #D9D0BF;
  --color-border-strong: #857D6E;
  --color-focus: #8A4B1F;
  --color-logo-badge: #FFFFFF;

  --color-night: #1C2321;
  --color-night-text: #EDE7DB;
  --color-night-muted: #BDB5A6;
  --color-night-accent: #A8C7AF;
  --color-night-accent-hover: #C9DECE;
  --color-night-border: #6B7A74;
  --color-on-night-accent: #13201A;
  --color-night-focus: #E8B872;

  /* Typography */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --step--1: clamp(0.875rem, 0.84rem + 0.17vw, 0.95rem);
  --step-0: clamp(1.0625rem, 1rem + 0.31vw, 1.1875rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3: clamp(1.8rem, 1.45rem + 1.75vw, 2.75rem);
  --step-4: clamp(2.1rem, 1.55rem + 2.75vw, 3.5rem);
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.65;
  --tracking-display: -0.01em;
  --tracking-eyebrow: 0.12em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 600;
  --measure: 66ch;

  /* Spacing (8 px base) */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-section: clamp(3rem, 2rem + 5vw, 6rem);
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);

  /* Radii */
  --radius-s: 2px;
  --radius-m: 6px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-1: 0 1px 2px rgb(36 34 30 / 0.06), 0 2px 8px rgb(36 34 30 / 0.06);
  --shadow-2: 0 4px 16px rgb(36 34 30 / 0.10), 0 1px 3px rgb(36 34 30 / 0.08);

  /* Layout */
  --width-content: 68rem;
  --width-wide: 76rem;
  --width-text: 42rem;
  --tap-min: 44px;
  --header-h: 4.25rem;
  --focus-ring: 3px solid var(--color-focus);
  --focus-offset: 2px;

  /* Motion (only applied inside prefers-reduced-motion: no-preference) */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 600ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-surface: #161B19;
    --color-surface-raised: #1F2623;
    --color-surface-sunken: #111513;
    --color-text: #EDE7DB;
    --color-text-muted: #B9B1A2;
    --color-accent: #9CC0A5;
    --color-accent-hover: #BCD6C2;
    --color-on-accent: #13201A;
    --color-brass: #C9A458;
    --color-brass-text: #D9B86A;
    --color-border: #3A423F;
    --color-border-strong: #7C8580;
    --color-focus: #E8B872;
    --color-logo-badge: #FFFFFF;

    --color-night: #222B28;

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.35), 0 2px 8px rgb(0 0 0 / 0.30);
    --shadow-2: 0 4px 16px rgb(0 0 0 / 0.45), 0 1px 3px rgb(0 0 0 / 0.35);
  }
}

/* Reduced motion: collapse every duration token so nothing animates even if a rule
   outside the no-preference block ever references them. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}