/* Design tokens — the only place a raw colour, size or duration is allowed to appear.
   Components reference tokens; if a component needs a value that is not here, add it
   here first. Palette and type decisions are justified in docs/BRIEF.md §2. */

:root {
  /* ---- colour ------------------------------------------------------------ */
  --plum-900: #2f1e38;
  --plum-700: #4a3155;
  --plum-500: #8c59b3;
  --plum-400: #a678c6;
  --plum-300: #c3a0d8;
  --plum-100: #efe6f8;

  --blush-500: #d9799f;
  --blush-300: #eeb3c9;
  --blush-100: #f9e7ef;

  --gold-500: #b8912f;

  --paper: #fdfbfc;
  --surface: #ffffff;
  --surface-sunken: #f7f2f6;

  --ink: var(--plum-900);
  --ink-soft: var(--plum-700);
  /* 4.62:1 on --paper — the lightest text colour that clears WCAG AA for body copy */
  --ink-muted: #6b5a74;

  /* Accent colours split into a FILL tone and an INK tone. The brand purple is
     only safe as text on the near-white page: measured against the tints it is
     #8c59b3 on #f9e7ef = 4.24:1 and on #efe6f8 = 3.98:1 — both fail AA for body
     text. Use --plum-ink / --blush-ink whenever type sits on a tinted section. */
  --plum-ink: #5b3475; /* 7.6:1 on --lilac-100, 8.0:1 on --paper */
  --blush-ink: #a0405f; /* 5.1:1 on --blush-100 */
  --line: #e8dfe9;
  --line-strong: #d3c4d8;

  --ok-600: #2f7d55;
  --ok-100: #e4f4ea;
  --warn-600: #a76a12;
  --warn-100: #fdf1de;
  --danger-600: #b53247;
  --danger-100: #fce8ec;

  --focus: #6a2fa0; /* 3.4:1 against --paper and against --plum-100 */

  /* ---- type ------------------------------------------------------------- */
  /* Two families, three weights, total. EB Garamond 400 for display; Jost 400 for
     body and 500 for UI labels and buttons. Adding a fourth weight or a third
     family fails reference criterion TYPE-01. Google Fonts serves the latin-ext
     range (n-with-tilde, accented vowels) automatically by unicode-range.

     NOT Cormorant Garamond, which was the first choice: its Google Fonts build
     mis-positions the acute accent, rendering "próxima" and "más" with the mark
     floating to the right of and detached from its vowel. On a Spanish-first site
     that is a defect in the most common diacritic in the language. EB Garamond is
     the same old-style genre, sets accents correctly, and carries a slightly larger
     x-height — which is why the display steps below are ~7% smaller than they were. */
  --font-display: 'EB Garamond', 'Iowan Old Style', Palatino, Georgia, serif;
  --font-body: 'Jost', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --weight-body: 400;
  --weight-ui: 500;

  /* Fluid scale, 390px -> 1440px. Body stays 17px on mobile: Spanish runs long and
     16px with a 1.6 line-height is the floor for comfortable reading on a phone. */
  --step--1: clamp(0.875rem, 0.86rem + 0.1vw, 0.9375rem);
  --step-0: clamp(1.0625rem, 1.04rem + 0.12vw, 1.125rem);
  --step-1: clamp(1.1875rem, 1.13rem + 0.28vw, 1.375rem);
  --step-2: clamp(1.375rem, 1.24rem + 0.66vw, 1.75rem);
  --step-3: clamp(1.625rem, 1.4rem + 1.1vw, 2.3rem);
  --step-4: clamp(2rem, 1.57rem + 2.07vw, 3.25rem);
  --step-5: clamp(2.3rem, 1.6rem + 3.4vw, 4.15rem);

  --lh-tight: 1.12;
  --lh-heading: 1.2;
  --lh-body: 1.6;
  --measure: 68ch;

  --tracking-caps: 0.14em;

  /* ---- space ------------------------------------------------------------ */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6.5rem;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --shell: 74rem;
  --shell-narrow: 44rem;

  /* ---- shape ------------------------------------------------------------ */
  /* Deliberately unequal: photos stay nearly square, controls are softer,
     pills are fully round. Uniform radii are what make a page look templated. */
  --radius-photo: 6px;
  --radius-card: 12px;
  --radius-control: 10px;
  --radius-pill: 999px;

  --border-hair: 1px solid var(--line);

  /* Two shadow levels only (BRIEF §2) */
  --shadow-raise: 0 1px 2px rgba(47, 30, 56, 0.06), 0 2px 6px rgba(47, 30, 56, 0.05);
  --shadow-float: 0 8px 24px rgba(47, 30, 56, 0.12);

  /* ---- motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;

  --z-header: 100;
  --z-drawer: 200;
  --z-lightbox: 300;
  --z-toast: 400;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}