/* =============================================================================
   FD Tokens
   =============================================================================
   Design tokens — colours, typography, spacing, transitions, shadows.

   These CSS custom properties are the foundation everything else builds on.
   Adjust values here to retune the palette site-wide.

   Loaded first by functions.php so all subsequent CSS files can use these
   variables via var(--fd-name).

   MIRRORED IN SALIENT THEME OPTIONS (update BOTH when changing):
     accent #c4986b · accent-2 #d9b77c · site background #1f1d1a
     header background #1a1815 · button radius 6px
     serif: Cormorant Garamond if loaded, else Source Serif 4 (see --fd-font-serif)

   CANONICAL BREAKPOINTS (media queries cannot use custom properties, so this
   comment is the source of truth): 600px · 900px · 1000px. Legacy files also
   use 690px/999px; do not introduce new values.
   ============================================================================= */


:root {

  /* -------------------------------------------------------------------------
     Background scale — warm charcoal, not pure black
     ------------------------------------------------------------------------- */
  --fd-bg: #1f1d1a;                /* main page background */
  --fd-bg-soft: #1a1815;            /* header bar — warmed to match the page ground */
  --fd-bg-elevated: #151515;        /* elevated surfaces, rare use */
  --fd-bg-panel: #181715;           /* dropdown panels, mega menus */
  --fd-bg-card: #25231f;            /* card backgrounds, subtle lift */
  --fd-bg-card-hover: #2a2823;     /* cards on hover */


  /* -------------------------------------------------------------------------
     Text scale — off-white, slightly warm
     ------------------------------------------------------------------------- */
  --fd-text: #ebe6dc;               /* primary body text */
  --fd-text-strong: #f0ece4;        /* emphasised text, headings, strong */
  --fd-text-muted: #a39d8e;        /* secondary text, captions, labels */
  --fd-text-soft: #948e82;          /* tertiary, meta info, dates — warmed */
  --fd-text-faint: #6e695e;         /* faintest text; borders use --fd-line-warm */


  /* -------------------------------------------------------------------------
     Accent — single warm ochre, with strong / soft / line variants
     ------------------------------------------------------------------------- */
  --fd-accent: #c4986b;             /* primary accent */
  --fd-accent-strong: #d9b77c;     /* hover states, emphasised accent */
  --fd-accent-soft: rgba(196, 152, 107, 0.18);   /* accent backgrounds */
  --fd-accent-line: rgba(196, 152, 107, 0.42);   /* accent borders, lines */

  /* Alpha steps derived from the accent. New code should use these instead of
     hardcoded rgba(196,152,107,x) so a future accent retune follows through.
     Legacy files migrate gradually. */
  --fd-accent-a06: color-mix(in srgb, var(--fd-accent) 6%, transparent);
  --fd-accent-a12: color-mix(in srgb, var(--fd-accent) 12%, transparent);
  --fd-accent-a22: color-mix(in srgb, var(--fd-accent) 22%, transparent);
  --fd-accent-a35: color-mix(in srgb, var(--fd-accent) 35%, transparent);
  --fd-accent-a55: color-mix(in srgb, var(--fd-accent) 55%, transparent);
  --fd-accent-a72: color-mix(in srgb, var(--fd-accent) 72%, transparent);

  /* OPAQUE equivalents of the alpha steps over --fd-bg. Use these for fills
     that must occlude what sits behind them (layered SVG art: the Study). */
  --fd-fill-06: color-mix(in srgb, var(--fd-accent) 6%, var(--fd-bg));
  --fd-fill-12: color-mix(in srgb, var(--fd-accent) 12%, var(--fd-bg));
  --fd-fill-22: color-mix(in srgb, var(--fd-accent) 22%, var(--fd-bg));
  --fd-fill-35: color-mix(in srgb, var(--fd-accent) 35%, var(--fd-bg));


  /* -------------------------------------------------------------------------
     Neutral lines — for dividers and borders
     ------------------------------------------------------------------------- */
  --fd-line: rgba(255, 255, 255, 0.12);
  --fd-line-soft: rgba(255, 255, 255, 0.075);
  --fd-line-warm: #6e695e;          /* warm visible rule (intro blocks, section headers) */


  /* -------------------------------------------------------------------------
     Shadows
     ------------------------------------------------------------------------- */
  --fd-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);


  /* -------------------------------------------------------------------------
     Typography
     -------------------------------------------------------------------------
     Source Serif 4 is loaded by Salient today, so it is the live serif until
     Cormorant Garamond is actually loaded (Salient Typography or self-hosted).
     Keeping Cormorant first means the day it loads, it simply takes over.   */
  --fd-font-serif: 'Cormorant Garamond', 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --fd-font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --fd-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;


  /* -------------------------------------------------------------------------
     Spacing
     ------------------------------------------------------------------------- */
  --fd-card-radius: 6px;
  --fd-card-padding: 1.25rem;

  --fd-mobile-gutter: 24px;
  --fd-mobile-gutter-small: 18px;


  /* -------------------------------------------------------------------------
     Transitions
     ------------------------------------------------------------------------- */
  --fd-transition: 220ms ease-out;
}