/* tokens.css — the SOSO'S design tokens. Components only ever read the
   SEMANTIC slots (--bg, --ink, --ink-soft, --accent, --focus-ring, --rule);
   the .section--dark theme re-points those slots at the aubergine palette,
   so dark feature bands need zero per-component overrides. */

:root {
  /* Brand palette */
  --aubergine: #30223C;        /* primary identity color, dark surfaces */
  --aubergine-deep: #250f2e;   /* deepest band (footer base, gradients) */
  --aubergine-bright: #4b2660; /* gradient highlights on dark bands */
  --cream: #faf8f2;            /* warm off-white ground */
  --cream-shade: #f0ebdf;      /* card fills, shaded editorial sections */
  --thyme: #9b5ba8;            /* wild-thyme bloom accent */
  --thyme-deep: #7a4187;       /* thyme on light ground (contrast-safe) */
  --thyme-green: #4a5d43;      /* foliage accent, sparing */
  --amber: #c98722;            /* honey: CTAs, the drop, highlights */
  --amber-deep: #9a6511;       /* amber hover / small accents on cream */
  --amber-soft: #e5b264;       /* amber accents on aubergine */

  /* Semantic slots — light (cream) theme is the default.
     --accent is for shapes/fills; --accent-text is the CONTRAST-SAFE accent
     for small text (plain amber on cream is only ~2.8:1 — never use it). */
  --bg: var(--cream);
  --ink: var(--aubergine);
  --ink-soft: #5d4a69;
  --accent: var(--amber);
  --accent-text: var(--amber-deep);
  --focus-ring: var(--amber-deep);
  --rule: rgba(50, 22, 61, 0.16);

  /* Type */
  --font-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --step--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.18rem + 0.35vw, 1.5rem);
  --step-2: clamp(1.55rem, 1.42rem + 0.7vw, 2rem);
  --step-3: clamp(1.9rem, 1.62rem + 1.5vw, 2.8rem);
  --step-4: clamp(2.4rem, 1.9rem + 2.6vw, 4rem);
  --step-5: clamp(3rem, 2.2rem + 4.2vw, 5.5rem);
  --track-wide: 0.32em; /* short tracked-caps lines only, never paragraphs */
  --measure: 65ch;

  /* Space */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-s: 1rem;
  --space-m: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --space-l: clamp(2.5rem, 2rem + 2vw, 3.75rem);
  --space-xl: clamp(4rem, 3rem + 4vw, 6.5rem);
  --space-2xl: clamp(5.5rem, 4rem + 7vw, 10rem);

  /* Shape + motion */
  --radius: 4px;
  --dur: 300ms;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Aubergine feature bands: flip the semantic slots once, done. */
.section--dark {
  --bg: var(--aubergine);
  --ink: var(--cream);
  --ink-soft: rgba(250, 248, 242, 0.78);
  --accent: var(--amber-soft);
  --accent-text: var(--amber-soft);
  --focus-ring: var(--amber-soft);
  --rule: rgba(250, 248, 242, 0.2);
}

/* Amber band (wholesale CTA): dark ink on honey ground. */
.section--amber {
  --bg: var(--amber);
  --ink: var(--aubergine);
  --ink-soft: rgba(50, 22, 61, 0.8);
  --accent: var(--aubergine);
  --accent-text: var(--aubergine);
  --focus-ring: var(--aubergine);
  --rule: rgba(50, 22, 61, 0.25);
}

/* Shaded editorial variant on cream. */
.section--shade {
  --bg: var(--cream-shade);
}

/* One switch honors prefers-reduced-motion for every transition/animation. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}