/* Design tokens: every colour, size and font used by the site lives here. */
:root {
  /* Colour: ink and surfaces */
  --c-ink: #0c2a31;
  --c-text-muted: #4a6168;
  --c-text-subtle: #587077;
  --c-bg: #f1f6f5;
  --c-surface: #ffffff;
  --c-line: #d3e0de;
  --c-line-strong: #b3c7c4;

  /* Colour: brand */
  --c-primary: #0b6b6f;
  --c-primary-hover: #08565a;
  --c-primary-soft: #dcefee;
  --c-accent: #f5a524;
  --c-accent-hover: #e39512;
  --c-accent-soft: #fff0d2;
  --c-accent-ink: #7a4b00;
  --c-focus: #5fb3b6;
  --c-focus-soft: #cde9ea;

  /* Colour: meaning (item types and states) */
  --c-free: #1b8a5a;
  --c-free-soft: #ddf3e8;
  --c-free-ink: #0e5c3b;
  --c-swap: #5b5bd6;
  --c-swap-soft: #e7e7fb;
  --c-swap-ink: #3030a0;
  --c-danger: #c23b3b;
  --c-danger-hover: #a52e2e;
  --c-danger-soft: #fbe4e2;
  --c-danger-ink: #8a1f1f;
  --c-info: #2563a8;
  --c-info-soft: #e0ecf9;
  --c-info-ink: #1a4577;
  --c-neutral-soft: #e4ecea;
  --c-neutral-ink: #3f565c;

  /* Dark surfaces (footer, admin sidebar, auth panel) */
  --c-dark-text: #dbe9ea;
  --c-dark-muted: #9fbbbe;

  /* Type */
  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-sm: 0.875rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.1875rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.5rem, 1.25rem + 1vw, 1.95rem);
  --fs-2xl: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
  --fs-hero: clamp(2.5rem, 1.5rem + 4.4vw, 4.6rem);
  --lh-body: 1.55;
  --lh-tight: 1.15;

  /* Spacing */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;

  /* Shape */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Depth (tinted with the ink colour, never pure black) */
  --shadow-1: 0 1px 2px rgba(12, 42, 49, 0.08);
  --shadow-2: 0 10px 28px -10px rgba(12, 42, 49, 0.28);
  --shadow-3: 0 24px 60px -16px rgba(12, 42, 49, 0.4);

  /* Layout */
  --container: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);
}