/* ==========================================================================
   Design tokens
   Every colour, size, space, radius, shadow and timing value used by the
   site is defined here. Other stylesheets should only reference these.
   ========================================================================== */

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/assets/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/assets/fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Used for data: UUIDs, coordinates, commands, server addresses. */
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/assets/fonts/atkinson-hyperlegible-mono-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Core palette (fixed, do not add brand colours) ------------------ */
  --cream: #fefae0;
  --green: #606c38;
  --green-dark: #283618;
  --amber: #dda15e;
  --amber-dark: #bc6c25;

  /* ---- Derived neutrals (all contrast-checked against --cream) --------- */
  --cream-raised: #fffdf3;   /* inputs, raised panels */
  --cream-sunken: #f4edcc;   /* alternate section bands */
  --ink: var(--green-dark);  /* 12.2:1 on cream */
  --ink-muted: #555e3f;      /* 6.5:1 on cream, 5.8:1 on sunken */
  --ink-subtle: #7d8062;     /* 3.9:1: UI boundaries and disabled text only */
  --line: #ddd5b0;           /* decorative dividers only */
  --on-dark: var(--cream);
  --on-dark-muted: #c9cdaf;  /* 7.9:1 on green-dark */

  /* Game preview surface. Holds in-game text colours (content, not UI), which
     need a dark neutral behind them just as they do in Minecraft. */
  --game-surface: #1c1c1a;
  --game-surface-line: #3a3a36;

  /* ---- Semantic roles --------------------------------------------------- */
  --color-bg: var(--cream);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-muted);
  --color-link: var(--green);
  --color-link-hover: var(--green-dark);
  --color-link-underline: var(--amber);
  --color-link-underline-hover: var(--amber-dark);
  --color-focus: var(--amber-dark);
  --color-focus-on-dark: var(--amber);
  --color-border: var(--green-dark);
  --color-border-control: var(--ink-subtle);
  --color-selection: var(--amber);

  /* ---- Typography ------------------------------------------------------- */
  --font-sans: 'Atkinson Hyperlegible Next', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Atkinson Hyperlegible Mono', ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;

  --weight-regular: 400;
  --weight-medium: 560;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* Scale: size / line-height / tracking. Use these via the .text-* utilities
     or the element defaults in base.css; never pick one-off sizes. */
  --text-xs: 0.8125rem;   --leading-xs: 1.4;    --tracking-xs: 0.06em;
  --text-sm: 0.9375rem;   --leading-sm: 1.5;
  --text-base: 1.0625rem; --leading-base: 1.65;
  --text-lg: 1.1875rem;   --leading-lg: 1.6;
  --text-xl: 1.375rem;    --leading-xl: 1.4;
  --text-2xl: clamp(1.5rem, 1.35rem + 0.6vw, 1.75rem);  --leading-2xl: 1.25;  --tracking-2xl: -0.01em;
  --text-3xl: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);  --leading-3xl: 1.18;  --tracking-3xl: -0.015em;
  --text-4xl: clamp(2rem, 1.6rem + 1.8vw, 2.875rem);    --leading-4xl: 1.1;   --tracking-4xl: -0.02em;
  --text-hero: clamp(2.375rem, 1.6rem + 3.4vw, 4rem);   --leading-hero: 1.04; --tracking-hero: -0.025em;

  /* ---- Spacing (4px based) ----------------------------------------------- */
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-9: 5rem;     /* 80px */
  --space-10: 6rem;    /* 96px */

  /* Vertical rhythm between page sections, tighter on small screens. */
  --section-space: clamp(var(--space-8), 6vw + 1rem, var(--space-10));

  /* ---- Radius --------------------------------------------------------- */
  --radius-sm: 3px;   /* buttons, inputs, labels */
  --radius-md: 6px;   /* panels, list containers */
  --radius-lg: 10px;  /* large feature panels, used sparingly */

  /* ---- Borders -------------------------------------------------------- */
  --border-width: 2px;
  --border-thin: 1px;

  /* ---- Depth ------------------------------------------------------------
     Hard, offset shadows in the dark companion of each colour. No grey blur. */
  --depth-1: 2px;
  --depth-2: 4px;
  --depth-3: 6px;
  --shadow-primary: 0 var(--depth-2) 0 var(--green-dark);
  --shadow-primary-hover: 0 var(--depth-3) 0 var(--green-dark);
  --shadow-primary-active: 0 var(--depth-1) 0 var(--green-dark);
  --shadow-secondary: 0 var(--depth-2) 0 var(--amber-dark);
  --shadow-secondary-hover: 0 var(--depth-3) 0 var(--amber-dark);
  --shadow-secondary-active: 0 var(--depth-1) 0 var(--amber-dark);
  --shadow-panel: var(--depth-2) var(--depth-2) 0 var(--green-dark);
  --shadow-panel-warm: 0 var(--depth-3) 0 var(--amber-dark);

  /* ---- Motion ----------------------------------------------------------- */
  --duration-fast: 120ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* ---- Layout ----------------------------------------------------------- */
  --container-max: 72rem;
  --container-narrow: 44rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-height: 4.5rem;
}

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