/* ===========================================================================
   Diva Creative, Design Tokens
   Single source of truth for colour, type, spacing, motion, radii.
   --------------------------------------------------------------------------- */

:root {
  /* ===== BRAND TOKENS (managed via /admin/ Brand tab) ===========
     Don't edit these by hand, they're rewritten on every brand save.
     Edit the layout/spacing/motion tokens below as you like.
     Two layers: (1) FVS palette, (2) legacy semantic slots. */

  /* --- FVS palette (Flexible Visual Systems, 2025 identity) --- */
  --diva-graphite: #1F2024;
  --diva-milk: #F5EDDE;
  --diva-blush: #F5C8A8;
  --diva-klein: #1408FE;
  --diva-lagoon: #0F7488;
  --diva-match: #E84B36;
  --diva-wink: #F8D5D2;
  --diva-tangerine: #D33D14;
  --diva-glacier: #BDD3DC;
  --diva-lichen: #5F6B33;
  --diva-saffron: #E8A920;
  --diva-mushroom: #BBA98B;
  --diva-branch: #6B4E2E;

  /* --- Legacy semantic slots (kept for existing components) --- */
  --diva-teal:          #E84B36;
  --diva-teal-deep:     #C53A28;
  --diva-teal-ink:      #921F11;
  --diva-peach:         #F5C8A8;
  --diva-peach-soft:    #FADFCC;
  --diva-charcoal:      #1F2024;
  --diva-charcoal-soft: #2A2C30;
  --diva-cream:         #F5EDDE;
  --diva-paper:         #FBF5E8;

  --font-serif:         'Jost', Futura, 'Helvetica Neue', sans-serif;
  --font-sans:          'Jost', Futura, 'Helvetica Neue', sans-serif;
  --font-logo:          'Jost', Futura, 'Helvetica Neue', sans-serif;
  --font-display:       'Playfair Display', Georgia, serif;
  /* ===== END BRAND TOKENS ===== */

  /* Legacy 2015 secondary accents, used sparingly as data/category swatches */
  --diva-pink-2015:     #DDA0AF;
  --diva-blue-2015:     #CAE0F3;
  --diva-yellow-2015:   #F3D35B;

  /* --- Semantic surfaces -------------------------------------------------- */
  --canvas:             var(--diva-milk);
  --surface:            var(--diva-paper);
  --surface-dark:       var(--diva-graphite);
  --surface-accent:     var(--diva-match);
  --surface-blush:      var(--diva-blush);
  /* Legacy aliases (existing components still reference these) */
  --surface-teal:       var(--diva-match);
  --surface-peach:      var(--diva-blush);

  /* --- Text --------------------------------------------------------------- */
  --text-primary:       var(--diva-graphite);
  --text-secondary:     #3C3E42;
  --text-muted:         #5C5E63;
  --text-on-dark:       var(--diva-milk);
  --text-on-dark-soft:  #D9CFB8;
  --text-on-accent:     var(--diva-milk);
  --text-on-accent-soft: var(--diva-wink);
  --text-on-blush:      var(--diva-klein);
  /* Legacy aliases */
  --text-on-teal:       var(--diva-milk);
  --text-on-teal-soft:  var(--diva-wink);
  --text-accent:        var(--diva-match);

  /* --- Borders & dividers ------------------------------------------------- */
  --border-subtle:      rgba(31, 32, 36, 0.10);
  --border-strong:      rgba(31, 32, 36, 0.22);
  --border-on-dark:     rgba(245, 237, 222, 0.18);
  --border-on-accent:   rgba(245, 237, 222, 0.28);
  --border-on-teal:     rgba(245, 237, 222, 0.28);

  /* --- Typography (font families come from BRAND TOKENS block at top) ------ */

  /* Fluid type ramp.  Display sizes are bigger and bolder than the previous
     version — the new hero headlines run to 9rem on a wide viewport. */
  --fs-display:         clamp(3.5rem, 1.5rem + 7vw, 9rem);        /* hero takeover */
  --fs-h1:              clamp(2.75rem, 1.6rem + 4vw, 5rem);
  --fs-h2:              clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem);
  --fs-h3:              clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem);
  --fs-h4:              1.25rem;
  --fs-stat:            clamp(3.25rem, 1.5rem + 5vw, 6.5rem);     /* big stat numbers */
  --fs-num:             clamp(4rem, 1.5rem + 7vw, 9rem);          /* manifesto 01 / 02 / 03 */
  --fs-lead:            clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  --fs-body:            1rem;
  --fs-small:           0.875rem;
  --fs-micro:           0.75rem;

  --lh-display:         0.98;
  --lh-tight:           1.05;
  --lh-snug:            1.32;
  --lh-body:            1.55;

  --tracking-tight:     -0.025em;
  --tracking-tighter:   -0.035em;     /* for the very large display sizes */
  --tracking-normal:    0;
  --tracking-wide:      0.04em;
  --tracking-caps:      0.14em;

  /* --- Spacing (8px grid, plus a 4px half-step) --------------------------- */
  --space-1:            4px;
  --space-2:            8px;
  --space-3:            12px;
  --space-4:            16px;
  --space-5:            24px;
  --space-6:            32px;
  --space-7:            48px;
  --space-8:            64px;
  --space-9:            96px;
  --space-10:           128px;
  --space-11:           160px;

  /* --- Layout widths ------------------------------------------------------ */
  --content-max:        1240px;
  --content-wide:       1400px;
  --reading-max:        680px;
  --form-max:           520px;

  /* --- Radii -------------------------------------------------------------- */
  --radius-xs:          4px;
  --radius-sm:          8px;
  --radius-md:          14px;
  --radius-lg:          24px;
  --radius-xl:          36px;
  --radius-pill:        999px;

  /* --- Elevation ---------------------------------------------------------- */
  --shadow-xs:          0 1px 2px rgba(31, 32, 36, 0.04);
  --shadow-sm:          0 4px 12px rgba(31, 32, 36, 0.06);
  --shadow-md:          0 12px 32px rgba(31, 32, 36, 0.10);
  --shadow-lg:          0 24px 60px rgba(31, 32, 36, 0.14);
  --shadow-inset:       inset 0 0 0 1px var(--border-subtle);

  /* --- Motion ------------------------------------------------------------- */
  --ease-out-quart:     cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:      cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:      160ms;
  --duration-base:      280ms;
  --duration-slow:      520ms;

  /* --- Focus ring --------------------------------------------------------- */
  --focus-ring:         0 0 0 3px rgba(232, 75, 54, 0.45);
  --focus-ring-on-dark: 0 0 0 3px rgba(245, 200, 168, 0.65);

  /* --- Grid utilities ----------------------------------------------------- */
  --grid-gap:           clamp(16px, 2.5vw, 40px);
  --section-pad:        clamp(96px, 13vw, 200px);
}

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

/* ===========================================================================
   Flexible Visual System — the 2025 Diva brand expresses itself through
   nine named colour pairings (page 18 of the visual identity book). Any
   section can opt into a pairing with a single class, and child surfaces
   inherit the pairing via --fvs-bg / --fvs-fg / --fvs-accent custom props.

   Usage:
     <section class="fvs fvs--graphite-milk">...</section>
     <section class="fvs fvs--blush-klein">...</section>
   ---------------------------------------------------------------------- */
.fvs {
  background: var(--fvs-bg);
  color: var(--fvs-fg);
}
.fvs--graphite-milk {
  --fvs-bg: var(--diva-graphite);
  --fvs-fg: var(--diva-milk);
  --fvs-accent: var(--diva-match);
}
.fvs--milk-graphite {
  --fvs-bg: var(--diva-milk);
  --fvs-fg: var(--diva-graphite);
  --fvs-accent: var(--diva-match);
}
.fvs--blush-klein {
  --fvs-bg: var(--diva-klein);
  --fvs-fg: var(--diva-blush);
  --fvs-accent: var(--diva-blush);
}
.fvs--lagoon-blush {
  --fvs-bg: var(--diva-lagoon);
  --fvs-fg: var(--diva-blush);
  --fvs-accent: var(--diva-milk);
}
.fvs--match-wink {
  --fvs-bg: var(--diva-wink);
  --fvs-fg: var(--diva-match);
  --fvs-accent: var(--diva-match);
}
.fvs--match-flat {
  --fvs-bg: var(--diva-match);
  --fvs-fg: var(--diva-milk);
  --fvs-accent: var(--diva-graphite);
}
.fvs--tangerine-graphite {
  --fvs-bg: var(--diva-tangerine);
  --fvs-fg: var(--diva-graphite);
  --fvs-accent: var(--diva-milk);
}
.fvs--glacier-lichen {
  --fvs-bg: var(--diva-lichen);
  --fvs-fg: var(--diva-glacier);
  --fvs-accent: var(--diva-milk);
}
.fvs--saffron-match {
  --fvs-bg: var(--diva-saffron);
  --fvs-fg: var(--diva-match);
  --fvs-accent: var(--diva-graphite);
}
.fvs--graphite-mushroom {
  --fvs-bg: var(--diva-mushroom);
  --fvs-fg: var(--diva-graphite);
  --fvs-accent: var(--diva-graphite);
}
.fvs--branch-saffron {
  --fvs-bg: var(--diva-branch);
  --fvs-fg: var(--diva-saffron);
  --fvs-accent: var(--diva-milk);
}