/* ============================================================
   tokens.css — LENI ROBREDO / LIWANAG design system
   Single source of truth. Read PLAYBOOK.md §4–§6 first.
   ============================================================ */

:root {

  /* ──────────────────────────────────────────────────────────
     §4.0  THE FIVE-COLOR RULE  (non-negotiable)
     The site is built from exactly five anchor colors.
     Everything below this block is a tint/shade derivative.
     Never introduce a sixth hue.
     ────────────────────────────────────────────────────────── */
  --bone:       #F7F3EC;   /* 1. The room (background) */
  --plum:       #3A1B3D;   /* 2. The furniture (deep anchor) */
  --ink:        #2A2230;   /* 3. The voice (text) */
  --pink:       #B85870;   /* 4. The spark (dusty rose, premium UI accent) */
  --rose-gold:  #C6A07A;   /* 5. The jewelry (hairline) */

  /* ── Derivatives (tints/shades of the five anchors only) ── */

  /* bone family */
  --bone-2:     #FBF8F2;   /* raised surfaces / cards (bone lighter) */
  --bone-sink:  #EFE9DE;   /* subtle inset sections   (bone darker)  */
  --bone-warm:  #F2EADE;   /* warm midtone for mesh gradient */

  /* plum family */
  --plum-deep:  #1C0E21;   /* hero open / near-black plum (plum darker) */
  --plum-2:     #52264F;   /* layered dark panels         (plum lighter) */
  --plum-line:  #6E4368;   /* borders on dark surfaces    (plum lighter) */

  /* ink family */
  --ink-soft:   #5E5566;   /* secondary text  (ink lighter) */
  --ink-faint:  #9A8FA0;   /* hints, captions (ink lighter) */

  /* pink family */
  --pink-soft:    #D49AAA;   /* soft pink fills, hover tints */
  --pink-ghost:   #F5E2E8;   /* faintest pink wash */
  --movement-pink:#D4537E;   /* the iconic 2022 campaign pink — GLOWS ONLY,
                                never a UI fill/stroke. Brand reference. */

  /* rose-gold family */
  --rose-gold-2: #E2C6A8;  /* lighter rose-gold for gradient ends */

  /* ── Functional state colors (EXEMPT — form states only,
        never decorative palette). ── */
  --focus: var(--pink);
  --good:  #1D9E75;
  --warn:  #BA7517;

  /* ──────────────────────────────────────────────────────────
     §5  TYPOGRAPHY  (light, tight, refined)
     ────────────────────────────────────────────────────────── */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* Fraunces optical: very soft, max softness */
  --fr-soft: "SOFT" 100, "WONK" 0;

  /* Fluid type scale — larger hero, lighter weights everywhere */
  --t-hero: clamp(3.5rem,  8vw,   7rem);
  --t-h1:   clamp(2.25rem, 4.5vw, 4rem);
  --t-h2:   clamp(1.75rem, 3vw,   2.75rem);
  --t-h3:   clamp(1.2rem,  1.8vw, 1.5rem);
  --t-body: clamp(1rem,    1.1vw, 1.125rem);
  --t-kick: 0.78rem;

  /* Weight tokens */
  --w-display:   300;        /* Fraunces light = the premium move */
  --w-display-h: 400;        /* Slightly heavier for smaller heads */
  --w-body:      400;
  --w-body-m:    500;

  /* ──────────────────────────────────────────────────────────
     §6  SPACING & LAYOUT
     ────────────────────────────────────────────────────────── */
  --space-1:  0.5rem;
  --space-2:  1rem;
  --space-3:  1.5rem;
  --space-4:  2rem;
  --space-5:  3rem;
  --space-6:  4rem;
  --space-7:  6rem;
  --space-8:  8rem;

  --section-y:    clamp(5rem, 10vw, 9rem);
  --container:    1280px;
  --reading:      720px;
  --gutter:       clamp(1.5rem, 4vw, 3rem);

  --radius:       20px;
  --radius-lg:    28px;
  --radius-sm:    10px;

  --hairline:     1px solid color-mix(in srgb, var(--rose-gold) 45%, transparent);
  --hairline-soft:1px solid color-mix(in srgb, var(--rose-gold) 25%, transparent);

  /* ──────────────────────────────────────────────────────────
     §6  GLASS & SHADOW  (depth, the premium way)
     ────────────────────────────────────────────────────────── */

  /* Glassmorphic surfaces */
  --glass-bone:     color-mix(in srgb, var(--bone) 72%, transparent);
  --glass-bone-2:   color-mix(in srgb, var(--bone-2) 78%, transparent);
  --glass-plum:     color-mix(in srgb, var(--plum) 55%, transparent);
  --glass-blur:     blur(24px) saturate(160%);
  --glass-blur-lg:  blur(40px) saturate(180%);
  --glass-border:   1px solid color-mix(in srgb, var(--bone) 45%, transparent);
  --glass-border-2: 1px solid color-mix(in srgb, var(--rose-gold) 35%, transparent);

  /* Soft long plum-tinted shadows — the luxury depth */
  --shadow-xs: 0 1px 0 color-mix(in srgb, var(--rose-gold) 30%, transparent);
  --shadow-sm: 0 4px 12px -2px color-mix(in srgb, var(--plum) 14%, transparent);
  --shadow-md: 0 14px 40px -16px color-mix(in srgb, var(--plum) 22%, transparent);
  --shadow-lg: 0 28px 70px -24px color-mix(in srgb, var(--plum) 28%, transparent);
  --shadow-xl: 0 40px 100px -32px color-mix(in srgb, var(--plum) 32%, transparent);

  /* ──────────────────────────────────────────────────────────
     §6  MOTION  (calm, slow, reduced-motion safe)
     ────────────────────────────────────────────────────────── */
  --ease:         cubic-bezier(.22,.61,.36,1);
  --dur-fast:     200ms;
  --dur-base:     300ms;
  --dur-slow:     600ms;
  --dur-cinema:   2400ms;
}