/* ─── Design Tokens ──────────────────────────────────────── */
/*
  Single source of truth for all raw values.
  Every other CSS file references these variables — no raw
  values (hex colours, pixel lengths, etc.) appear elsewhere.
*/
:root {
  /* Type scale — fluid major third, generated with Utopia */
  --step--1: clamp(0.8889rem, 0.8861rem + 0.0111vw, 0.9rem);
  --step-0: clamp(1rem, 0.9688rem + 0.125vw, 1.125rem);
  --step-1: clamp(1.125rem, 1.0547rem + 0.2813vw, 1.4063rem);
  --step-2: clamp(1.2656rem, 1.1426rem + 0.4922vw, 1.7578rem);
  --step-3: clamp(1.4238rem, 1.2305rem + 0.7734vw, 2.1973rem);
  --step-4: clamp(1.6018rem, 1.3156rem + 1.1448vw, 2.7466rem);

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Colour palette — nature-inspired (Southern Moss gold + forest green) */
  /* Primitives — raw values, named by identity, not role */
  --green-forest: #376453;
  --green-forest-dark: #1e3a2e;
  --green-sage: #5a9d7a; /* dark-mode --color-primary — brighter green for contrast against the near-black dark bg */
  --green-sage-light: #6bb38a; /* dark-mode --color-primary-hover */
  --gold-medium-deep: #7f6d38; /* Medium-deep antique gold, clears 3:1 against both page backgrounds and 4.61:1 against light text — constant across modes */
  --brown-chestnut: #885d4e;
  --gold-tint-12: #e3dac2; /* tint 12/19 of Southern Moss */
  --stone-warm: #e7e3da; /* desaturated neutral, stepped down from --floral-white for a visible placeholder */
  --gold-shade-10: #5d5134; /* shade 10/19 of Southern Moss — dark-mode --color-border */
  --gold-shade-12: #4a4129; /* shade 12/19 of Southern Moss — dark-mode --color-surface */
  --gold-shade-16: #252015; /* shade 16/19 of Southern Moss */
  --gold-charcoal: #2c2618; /* dark-mode --color-surface-hover color-mix endpoint */
  --floral-white: #f6f4f0;

  /* Semantic tokens — reference primitives above, named by role. Use these everywhere else. */
  /* Light mode (default) */

  --color-bg: var(--floral-white);
  --color-text: var(--gold-shade-16);
  --color-primary: var(--green-forest);
  --color-primary-hover: var(--green-forest-dark);
  --color-accent: var(--gold-medium-deep); /* constant across modes — covers decorative uses (border/underline/background bar, needing only 3:1) and solid-fill surfaces like the footer and button-hover bg (paired with --color-text-on-accent-fill, needing 4.5:1 against light text) */
  --color-focus: var(--brown-chestnut);
  --color-surface: var(
    --stone-warm
  ); /* image placeholder fill — nav logo, card/hero/post-header image boxes */

  --color-surface-hover: color-mix(
    in srgb,
    var(--color-text) 6%,
    var(--color-bg)
  ); /* neutral tap/hover fill — distinct from --color-surface so interactive states don't read as gold-tinted */

  --color-border: var(--gold-tint-12);
  --color-text-muted: color-mix(in srgb, var(--color-text) 70%, transparent);
  --color-text-on-accent-fill: var(
    --floral-white
  ); /* constant across modes — pairs with --color-accent's solid-fill uses (footer, button-hover bg), which are dark gold in every mode */

  /* Layout */
  --container-max: 1200px;
  --content-max: 70ch;
  --nav-height: 3.5rem; /* desktop override at 48rem in nav.css, tied to the same drawer/inline breakpoint */

  /* Pagefind UI — mapped to site semantic tokens so dark mode is automatic */
  --pf-font: "Geist", system-ui, sans-serif;
  --pf-background: var(--color-bg);
  --pf-text: var(--color-text);
  --pf-text-secondary: var(--color-text-muted);
  --pf-text-muted: var(--color-text-muted);
  --pf-border: var(--color-border);
  --pf-border-focus: var(--color-primary);
  --pf-hover: var(--color-surface-hover);
  --pf-mark: var(--color-text);
  --focus-outline-width: 3px;
  --pf-outline-focus: var(--color-focus);
  --pf-outline-width: var(--focus-outline-width);
  --pf-outline-offset: 0.3rem;
  --pf-skeleton: var(--color-surface);
  --pf-skeleton-shine: var(--color-bg);
  --pf-result-title-font-size: var(--step-0);
  --pf-result-excerpt-font-size: var(--step--1);
  --pf-input-font-size: var(--step-0);
}

/* Dark mode — triggered by user preference or .dark class on <html> */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--gold-shade-16);
    --color-text: var(--gold-tint-12);
    --color-primary: var(--green-sage);
    --color-primary-hover: var(--green-sage-light);
    --color-surface: var(--gold-shade-12);
    --color-surface-hover: color-mix(
      in srgb,
      var(--gold-tint-12) 8%,
      var(--gold-charcoal)
    );
    --color-border: var(--gold-shade-10);
    --color-text-muted: color-mix(
      in srgb,
      var(--gold-tint-12) 70%,
      transparent
    );
  }
}

/* Explicit dark mode class (overrides prefers-color-scheme) */
html.dark {
  --color-bg: var(--gold-shade-16);
  --color-text: var(--gold-tint-12);
  --color-primary: var(--green-sage);
  --color-primary-hover: var(--green-sage-light);
  --color-surface: var(--gold-shade-12);
  --color-surface-hover: color-mix(
    in srgb,
    var(--gold-tint-12) 8%,
    var(--gold-charcoal)
  );
  --color-border: var(--gold-shade-10);
  --color-text-muted: color-mix(in srgb, var(--gold-tint-12) 70%, transparent);
}

/* Light mode override when user explicitly selects light (still respects prefers-color-scheme unless overridden) */
html.light {
  --color-bg: var(--floral-white);
  --color-text: var(--gold-shade-16);
  --color-primary: var(--green-forest);
  --color-primary-hover: var(--green-forest-dark);
  --color-surface: var(--stone-warm);
  --color-surface-hover: color-mix(
    in srgb,
    var(--color-text) 6%,
    var(--color-bg)
  );
  --color-border: var(--gold-tint-12);
  --color-text-muted: color-mix(in srgb, var(--color-text) 70%, transparent);
}