/* =========================================================
   PS JEWELRY × HAZE FILMS — Design tokens
   Campaign, Part Two: Narrative Blueprint

   The palette is the film's own: "Two colors, gold and blue.
   Sand, skin and metal on one side; sky, sea and dusk on the other."
   Every value below was sampled from the campaign stills.
   Change values here; style.css only consumes them.
   ========================================================= */

:root {
  /* ---------- SAND — daylight, the bare half ---------- */
  --sand:          #DED4C4;  /* lit dune */
  --sand-raised:   #E7DFD2;
  --sand-sunk:     #D2C7B5;
  --ink:           #1A1612;  /* dune shadow */
  --ink-2:         #4A4136;
  --ink-3:         #5F5549;
  --rule-on-sand:  rgba(26, 22, 18, 0.20);

  /* ---------- UMBER — golden hour, the adorned half ---------- */
  --umber:         #14110C;
  --umber-raised:  #1E1A13;
  --ivory:         #EFE7D8;
  --ivory-2:       rgba(239, 231, 216, 0.76);
  --ivory-3:       rgba(239, 231, 216, 0.58);
  --rule-on-dark:  rgba(239, 231, 216, 0.18);

  /* ---------- GOLD — the jewelry ---------- */
  --gold:          #D0A565;  /* text and lines on dark */
  --gold-bright:   #EBCB8F;  /* highlights */
  --gold-on-sand:  #7C5A22;  /* text and lines on sand */

  /* ---------- BLUE — dusk and sea ---------- */
  --night:         #0A1826;
  --dusk:          #16324A;
  --sea:           #7FA9C6;  /* text and lines on dark */
  --sea-pale:      #A9C2D2;
  --dusk-on-sand:  #1F4762;

  --black:         #000000;  /* the last image: silence */

  /* ---------- CHART MARKS — validated for colour-blind separation ---------- */
  --viz-gold-dark: #B58A3A;  /* on umber / night */
  --viz-sea-dark:  #3989B7;
  --viz-gold-sand: #93691A;  /* on sand */
  --viz-sea-sand:  #176490;

  /* ---------- TYPE ---------- */
  --font-serif:    "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans:     "Jost", "Avenir Next", "Century Gothic", "Segoe UI", system-ui, sans-serif;

  --fs-display:    clamp(3.25rem, 1.6rem + 7.2vw, 9.5rem);   /* hero title */
  --fs-act:        clamp(3.25rem, 1.8rem + 6vw, 7.5rem);     /* act titles once she is found */
  --fs-lead:       clamp(1.7rem, 1.15rem + 2.1vw, 3.2rem);   /* the point of each section */
  --fs-narr:       clamp(1.2rem, 1.02rem + 0.7vw, 1.6rem);   /* story text, found */
  --fs-narr-sm:    clamp(1.0625rem, 1rem + 0.25vw, 1.2rem);  /* story text, lost */
  --fs-body:       clamp(1rem, 0.96rem + 0.16vw, 1.0625rem);
  --fs-small:      0.875rem;
  --fs-micro:      0.78125rem;
  --fs-film:       clamp(0.72rem, 0.58rem + 0.48vw, 1rem);   /* on-screen text: small, thin, centred */
  --fs-stat:       clamp(2.4rem, 1.5rem + 3.2vw, 4.5rem);

  --lh-tight:      1.02;
  --lh-lead:       1.16;
  --lh-narr:       1.5;
  --lh-body:       1.6;
  --ls-film:       0.18em;

  /* ---------- SPACE ---------- */
  --gutter:        max(clamp(20px, 5vw, 76px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --edge:          max(clamp(16px, 2.4vw, 36px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));  /* bar and strip */
  --section-y:     clamp(88px, 13vh, 168px);
  --measure:       62ch;
  --page-max:      1360px;
  --bar-h:         72px;
  --strip-h:       58px;

  /* ---------- MOTION ---------- */
  --t-fast:        200ms;
  --t-base:        400ms;
  --t-slow:        800ms;
  --t-slower:      1400ms;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-cinematic: cubic-bezier(0.7, 0, 0.3, 1);
}

@media (max-width: 720px) {
  :root {
    --bar-h:       60px;
    --strip-h:     52px;
  }
}