/* ============================================================
   CRADLE DESIGN TOKENS — single source of truth for v3a–v3e
   Layer 1 of 3:  tokens.css  →  base.css  →  {variant}.css
   Variants may REMAP semantic tokens (--surface, --ink, …)
   but never invent new raw colors outside this palette.
   ============================================================ */

:root {
  /* ---- raw brand palette (from cradle.ph v2) ---- */
  --cr-teal:      #005c66;   /* dark slate grey  */
  --cr-deep:      #0c374a;   /* deep navy-teal   */
  --cr-gold:      #ffc500;
  --cr-orange:    #f0a000;
  --cr-crimson:   #d72d4f;
  --cr-red:       #e3526b;

  /* ---- derived tints & shades (perceptual mixes) ---- */
  --cr-teal-700:    color-mix(in oklab, var(--cr-teal) 78%, black);
  --cr-teal-300:    color-mix(in oklab, var(--cr-teal) 55%, white);
  --cr-teal-100:    color-mix(in oklab, var(--cr-teal) 16%, white);
  --cr-teal-050:    color-mix(in oklab, var(--cr-teal)  7%, white);
  --cr-deep-800:    color-mix(in oklab, var(--cr-deep) 80%, black);
  --cr-deep-300:    color-mix(in oklab, var(--cr-deep) 50%, white);
  --cr-gold-300:    color-mix(in oklab, var(--cr-gold) 45%, white);
  --cr-gold-100:    color-mix(in oklab, var(--cr-gold) 18%, white);
  --cr-crimson-700: color-mix(in oklab, var(--cr-crimson) 75%, black);
  --cr-crimson-100: color-mix(in oklab, var(--cr-crimson) 14%, white);

  /* ---- neutrals, tinted toward teal (never pure b/w) ---- */
  --cr-ink:       color-mix(in oklab, var(--cr-deep) 88%, black);
  --cr-ink-soft:  color-mix(in oklab, var(--cr-deep) 62%, #6b7f8a);
  --cr-paper:     color-mix(in oklab, white 96%, var(--cr-gold));
  --cr-paper-warm:color-mix(in oklab, white 92%, var(--cr-gold));
  --cr-white:     #fdfdfb;

  /* ---- semantic slots (variants remap these) ---- */
  --surface:      var(--cr-paper);
  --surface-alt:  var(--cr-teal-050);
  --ink:          var(--cr-ink);
  --ink-soft:     var(--cr-ink-soft);
  --accent:       var(--cr-crimson);
  --accent-2:     var(--cr-gold);
  --link:         var(--cr-teal);

  /* ---- typography ---- */
  --font-display: "Titillium Web", "Segoe UI", sans-serif;
  --font-body:    "Proxima Nova", "Segoe UI", sans-serif;
  --font-serif:   "Fraunces", Georgia, serif;
  --font-round:   "Baloo 2", "Segoe UI", sans-serif;
  --font-black:   "Archivo Black", "Titillium Web", sans-serif;
  --font-slab:    "Zilla Slab", Georgia, serif;

  /* fluid modular scale (1.25 ratio, breathes with viewport) */
  --text-xs:   clamp(0.72rem, 0.69rem + 0.15vw, 0.80rem);
  --text-sm:   clamp(0.84rem, 0.80rem + 0.20vw, 0.95rem);
  --text-base: clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --text-md:   clamp(1.20rem, 1.13rem + 0.35vw, 1.40rem);
  --text-lg:   clamp(1.50rem, 1.38rem + 0.60vw, 1.90rem);
  --text-xl:   clamp(1.95rem, 1.75rem + 1.00vw, 2.60rem);
  --text-2xl:  clamp(2.50rem, 2.15rem + 1.75vw, 3.60rem);
  --text-3xl:  clamp(2.90rem, 2.40rem + 2.60vw, 4.40rem);
  --text-hero: clamp(3.00rem, 2.20rem + 4.00vw, 6.00rem);

  --leading-tight: 1.05;
  --leading-snug:  1.25;
  --leading-body:  1.65;

  /* ---- spacing scale ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-section: clamp(4rem, 3rem + 5vw, 8rem);
  --gutter:     clamp(1.25rem, 4vw, 4rem);
  --measure:    62ch;          /* comfortable reading width  */
  --page-max:   72rem;

  /* ---- shape & elevation ---- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-soft: 0 8px 30px color-mix(in oklab, var(--cr-deep) 14%, transparent);
  --shadow-hard: 6px 6px 0 0 var(--cr-ink);

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quint */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-med:  320ms;
  --dur-slow: 640ms;
}