/* ==========================================================================
   Design tokens — "Forest and cream"

   One central theme. Every component references these variables; no component
   should contain a raw colour, shadow or radius value.

   Direction: light editorial utility. Roughly 90% neutral cream surfaces with a
   single deep-green accent used sparingly for the logo, primary actions, links,
   active states, the focus ring and the drop-zone border. Hairline borders do
   the work that shadows used to do, so there is exactly one shadow in the
   system: the focus ring.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ------------------------------------------------------------- palette */
  --bg: #f4f0e8;
  --surface: #fbf9f4;
  --surface-hover: #f0ebdf;
  --pill: #eae4d6;
  --border: #ddd6c6;

  --accent: #14392b;
  --accent-hover: #0f2e22;
  --on-accent: #f4f0e8;

  --text: #12261e;
  --text-muted: #5f6b63;

  --success: #2f6b4f;
  --error: #a33a2a;
  --warning: #a8741a;

  --focus-ring: 0 0 0 3px rgba(20, 57, 43, 0.25);

  /* --------------------------------------------- legacy aliases (mapping) */
  /* Older components reference these names. They are mapped onto the palette
     above so no component needs to know the raw values. */
  --accent-active: var(--accent-hover);
  --accent-soft: var(--pill);
  --accent-soft-border: var(--border);
  --accent-contrast: var(--on-accent);

  --bg-subtle: var(--surface);
  --bg-muted: var(--pill);
  --surface-2: #f7f3eb;
  --surface-raised: var(--surface);
  --surface-inverse: var(--text);

  --border-strong: var(--border);
  --border-subtle: var(--border);
  --ring: rgba(20, 57, 43, 0.25);

  --text-2: var(--text-muted);
  --text-3: var(--text-muted);
  --text-4: #67706a;
  --text-inverse: var(--on-accent);
  --text-on-accent: var(--on-accent);

  /* Status: colour is reserved for status messages. Each has a pale tint and a
     border in the same hue at 30% opacity. */
  --success-soft: #e9efea;
  --success-border: rgba(47, 107, 79, 0.3);
  --success-text: #2f6b4f;

  --warning-soft: #f6efe0;
  --warning-border: rgba(168, 116, 26, 0.3);
  --warning-text: #7e5510;

  --danger: var(--error);
  --danger-soft: #f7e9e6;
  --danger-border: rgba(163, 58, 42, 0.3);
  --danger-text: #8e3123;

  /* Informational messages stay neutral: only success, error and warning carry
     colour in this system. */
  --info: var(--text-muted);
  --info-soft: var(--surface);
  --info-border: var(--border);
  --info-text: var(--text-muted);

  /* ---------------------------------------------------------- typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem; /* 11px */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.8125rem; /* 13px */
  --text-base: 1rem; /* 16px */
  --text-md: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.75rem; /* 28px */
  --text-3xl: 2.125rem; /* 34px */
  --text-4xl: 2.75rem; /* 44px */
  --text-5xl: 3.5rem; /* 56px */

  /* Two weights only. The semibold and bold names are retained as aliases so
     older rules cannot reintroduce a heavier cut. */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 500;
  --weight-bold: 500;

  --leading-tight: 1.12;
  --leading-snug: 1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.6;

  --tracking-tight: -0.035em;
  --tracking-snug: -0.011em;
  --tracking-wide: 0.02em;

  /* ------------------------------------------------------------- spacing */
  /* Multiples of 4px. */
  --space-0: 0;
  --space-1: 0.25rem; /* 4 */
  --space-2: 0.5rem; /* 8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem; /* 16 */
  --space-5: 1.25rem; /* 20 */
  --space-6: 1.5rem; /* 24 */
  --space-7: 1.75rem; /* 28 */
  --space-8: 2rem; /* 32 */
  --space-10: 2.5rem; /* 40 */
  --space-12: 3rem; /* 48 */
  --space-16: 4rem; /* 64 */
  --space-20: 5rem; /* 80 */
  --space-24: 6rem; /* 96 */

  /* 96px on desktop, 56px on mobile. */
  --section-y: clamp(3.5rem, 7vw, 6rem);
  --section-y-tight: clamp(2.5rem, 5vw, 4rem);

  /* -------------------------------------------------------------- radius */
  /* Controls 6px, cards and panels 10px, pills fully rounded. */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 10px;
  --radius-2xl: 10px;
  --radius-full: 999px;

  /* ------------------------------------------------------------- shadows */
  /* Hairline borders replace elevation. The focus ring is the only shadow. */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --shadow-focus: var(--focus-ring);
  --shadow-inset: none;

  /* -------------------------------------------------------------- layout */
  --container: 1200px;
  --container-narrow: 760px;
  --container-prose: 680px;
  --header-height: 64px;
  --gutter: clamp(1.25rem, 4vw, 2rem);

  /* -------------------------------------------------------------- motion */
  /* Colour, background and border only, 150ms, ease-out. */
  --ease-out: ease-out;
  --ease-in-out: ease-out;
  --duration-fast: 150ms;
  --duration-base: 150ms;
  --duration-slow: 150ms;

  /* ------------------------------------------------------------ z-index */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* -------------------------------------------------------------- tones */
  /* Category tones are neutral in this system. The classes remain so templates
     that add `tone-*` keep working, but they resolve to the muted palette. */
  --tone: var(--text-muted);
  --tone-soft: var(--pill);
}

/* Category tone helper classes. Kept for markup compatibility; all neutral. */
.tone-blue,
.tone-violet,
.tone-rose,
.tone-green,
.tone-emerald,
.tone-amber,
.tone-orange,
.tone-indigo,
.tone-teal,
.tone-slate,
.tone-cyan,
.tone-pink,
.tone-sky,
.tone-fuchsia,
.tone-lime,
.tone-purple {
  --tone: var(--text-muted);
  --tone-soft: var(--pill);
}

/* The site is light only. The attribute is still honoured as a no-op so a
   returning visitor with a stored preference is never left unstyled. */
[data-theme="dark"] {
  color-scheme: light;
}

/* The inline sprite is present in the DOM but must never occupy layout. */
.sprite-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}