/*
 * tokens.css — Pásalas design tokens (single source of truth).
 *
 * Direction: "Fiesta" — warm editorial keepsake. Chosen from the styleguide
 * prototype (.scratch/mvp/styleguide-prototype/NOTES.md). Per ADR-0005 this is
 * the base of the chain: tokens.css → ui.css → section sheets + styleguide.css.
 *
 * Everything downstream consumes the semantic tokens (--color-text,
 * --color-primary, --space-*, --text-*…), not the raw palette. Re-theming means
 * editing values here, nowhere else.
 *
 * Color note: the *-strong brand shades and the ink tiers are tuned so every
 * text/background pairing the components produce clears WCAG AA (≥4.5:1). The
 * bright base hues (--terracotta, --teal, --marigold) stay for fills and
 * decoration; the -strong variants carry text and white-on-color.
 */

:root {
  /* ----- Type families ----------------------------------------------------
     Fraunces (display serif) + Nunito Sans (body), each with a system fallback
     stack so the UI is legible before/without the web fonts. */
  --font-serif: "Fraunces", Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --font-sans: "Nunito Sans", -apple-system, "Segoe UI", system-ui, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", monospace;

  /* ----- Raw palette (Fiesta) — do not reference directly in components ---- */
  --paper: #fbf4e9;
  --paper-raised: #fffaf2;
  --paper-sunk: #f3e7d3;
  --cream-glow: #fff7ec;
  --ink: #3b2c22;
  --ink-soft: #74624f;   /* darkened from #7b6a5d → AA on sunk surfaces */
  --ink-faint: #7e6c5b;  /* darkened from #a99a8c → AA as body text */
  --terracotta: #e1623d;
  --terracotta-strong: #b04220;  /* darkened from #c34e2c → AA white-on & as link text */
  --marigold: #eaa92f;
  --teal: #2f9e8f;
  --teal-strong: #18796b;        /* AA white-on (badges) & as text on cream */
  --rose: #d36a8a;
  --marigold-tint: #fbe6b8;
  --marigold-line: #f1d28a;
  --marigold-ink: #6b4f15;
  --hairline: #efe2cf;
  --danger: #c2412f;

  /* Stage / overlay base (the one intentionally dark surface) */
  --noche: #1c140f;

  /* ----- Semantic colors — the only colors components should use ---------- */
  --color-bg: var(--paper);
  --color-surface: var(--paper-raised);
  --color-surface-sunk: var(--paper-sunk);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-soft);
  --color-text-faint: var(--ink-faint);
  --color-on-primary: #fff;
  --color-primary: var(--terracotta);
  --color-primary-strong: var(--terracotta-strong);
  --color-accent: var(--marigold);
  --color-eyebrow: var(--marigold-ink);   /* readable gold for eyebrows/labels */
  --color-secondary: var(--teal);
  --color-secondary-strong: var(--teal-strong);
  --color-decor: var(--rose);
  --color-border: var(--hairline);
  --color-live: var(--teal-strong);
  --color-danger: var(--danger);

  /* Tier badge palette */
  --color-tier-bg: var(--marigold-tint);
  --color-tier-border: var(--marigold-line);
  --color-tier-text: var(--marigold-ink);

  /* Overlay scrims & big-screen stage (Media viewers, Slideshow) */
  --color-scrim: rgb(28 20 15 / 55%);
  --color-scrim-strong: rgb(28 20 15 / 90%);
  --color-scrim-media: rgb(28 20 15 / 70%);
  --color-stage: var(--noche);
  --color-on-dark: var(--cream-glow);

  /* ----- Type scale ------------------------------------------------------- */
  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.875rem;   /* 14 */
  --text-base: 1rem;     /* 16 */
  --text-md: 1.125rem;   /* 18 */
  --text-lg: 1.375rem;   /* 22 */
  --text-xl: 1.75rem;    /* 28 */
  --text-2xl: 2.25rem;   /* 36 */
  --text-display: clamp(2.375rem, 7vw, 4rem); /* 38 → 64 */
  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.55;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.14em;

  /* ----- Spacing (4px base) ----------------------------------------------- */
  --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-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */

  /* ----- Radii ------------------------------------------------------------ */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* ----- Elevation -------------------------------------------------------- */
  --shadow-sm: 0 8px 20px rgb(59 44 34 / 10%);
  --shadow-md: 0 16px 34px rgb(59 44 34 / 18%);
  --shadow-primary: 0 10px 22px color-mix(in srgb, var(--color-primary-strong) 30%, transparent), inset 0 1px 0 rgb(255 255 255 / 22%);
  --shadow-primary-hover: 0 14px 28px color-mix(in srgb, var(--color-primary-strong) 38%, transparent);

  /* ----- Motion ----------------------------------------------------------
     Exponential ease-out for natural deceleration (not bare `ease`). */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 130ms var(--ease-out);
  --transition: 200ms var(--ease-out);

  /* ----- Layout ----------------------------------------------------------- */
  --container: 920px;
  --container-narrow: 720px;
  --container-wide: 1100px;
  --page-gutter: var(--space-6);

  /* ----- Z-index ---------------------------------------------------------- */
  --z-header: 100;
  --z-overlay: 1000;
  --z-toast: 1100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition: 0ms;
  }
}