/* ==========================================================================
   SETTINGS — design tokens for Wager Atelier
   Palette: light stone grey + forest green (structure) + amber (detail)
   Type: Sora, a geometric sans, used throughout at varying sizes/weights
   ========================================================================== */

:root {
  /* Colour: base surfaces */
  --color-bg: #f3f0e7;
  --color-bg-alt: #eae5d7;
  --color-surface: #fffdf8;
  --color-surface-alt: #f8f5ec;

  /* Colour: ink */
  --color-ink: #16241c;
  --color-ink-soft: #47554b;
  --color-ink-faint: #7c8a7f;

  /* Colour: forest green (structural / brand) */
  --color-primary: #1b4a33;
  --color-primary-dark: #10301f;
  --color-primary-tint: #e2ebe4;
  --color-primary-line: #1b4a3333;

  /* Colour: amber (detail / highlight) */
  --color-accent: #dd9a33;
  --color-accent-dark: #a97522;
  --color-accent-tint: #f8ecd6;

  /* Colour: lines */
  --color-line: rgba(22, 36, 28, 0.16);
  --color-line-strong: rgba(22, 36, 28, 0.38);
  --color-line-on-primary: rgba(255, 255, 255, 0.22);

  /* Status */
  --color-success: #1b4a33;
  --color-warn: #a5501f;

  /* Spacing scale — 4 / 8 based */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Containers */
  --container-max: 1200px;
  --container-mid: 920px;
  --container-narrow: 700px;

  /* Type */
  --font-base: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-2xs: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.625rem;
  --fs-xl: 2.125rem;
  --fs-2xl: 2.75rem;
  --fs-3xl: 3.5rem;
  --fs-4xl: 4.5rem;
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  /* Borders — double/framed on featured elements */
  --border-hair: 1px solid var(--color-line);
  --border-strong: 1px solid var(--color-line-strong);

  /* Motion — restrained: hover states only */
  --ease-standard: cubic-bezier(0.3, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
  }
}