/* ===================================================================
   tokens.css · design tokens for every page of caromilkez.com
   Source of truth: Figma "Caro Milkez · Design System" (QE57lmSVadKNNi6gz5lpQi).
   Variable code syntax in Figma = these names. Values also in tokens/*.json.
   =================================================================== */
:root{
  /* foundation */
  --charcoal:#191C23;--teal:#52756F;--crimson:#E23657;--crimson-deep:#C12B46;--sand:#F8EFE1;--white:#FFFFFF;
  --charcoal-light:#D9DDE4;--teal-light:#C9D7D3;--crimson-light:#E7C8D0;--sand-light:#F7F1E8;
  /* derived (mixes of the duotone pair, never new hues) */
  --ink-2:#4B5059;                       /* charcoal 75% on white: secondary text on light (8.3:1) */
  --line-art:rgba(217,221,228,.42);      /* illustration strokes on charcoal */
  --line-d:rgba(217,221,228,.14);        /* hairlines on dark */
  --line-l:rgba(25,28,35,.14);           /* hairlines on light */

  /* type */
  --font:'Mulish','Mulish Fallback','Avenir Next','Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --fs-display:clamp(52px,7vw,100px);--fs-h1:clamp(44px,4.8vw,68px);--fs-h2:clamp(40px,4.8vw,68px);
  --fs-statement:clamp(36px,3.8vw,54px);--fs-question:clamp(30px,3.2vw,46px);--fs-h3l:clamp(30px,2.8vw,40px);
  --fs-h3:clamp(24px,2.2vw,31px);--fs-quote:clamp(22px,2.2vw,31px);--fs-lede-strong:clamp(18px,1.55vw,22px);
  --fs-lede:clamp(18px,1.5vw,21px);--fs-body:18px;--fs-small:16px;--fs-caption:15px;
  --fs-kicker:clamp(15px,1.25vw,18px);--fs-tag:clamp(13px,1.1vw,16px);--fs-ribbon:clamp(12px,1vw,14px);
  --fs-counter:clamp(36px,3.9vw,56px);

  /* spacing */
  --gutter:clamp(20px,5vw,64px);
  --content:min(1120px,100% - 2 * var(--gutter));
  --edge:max(var(--gutter),calc((100% - 1120px) / 2));
  --section-y:clamp(96px,11vw,168px);
  --r-tail:10px;--r-sm:22px;--r-card:28px;

  /* motion */
  --ease:cubic-bezier(.23,1,.32,1);--ease-io:cubic-bezier(.45,0,.25,1);
  /* spacing scale (4px base) · Figma Spacing collection */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:28px;
  --space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-24:96px;--space-30:120px;--space-40:160px;

  /* sizes · Figma Size collection (anything interactive is at least --size-target) */
  --size-target:44px;--size-control-sm:44px;--size-control-md:58px;--size-control-lg:70px;--size-icon-button:46px;
  --size-bullet-sm:34px;--size-bullet-md:44px;--size-bullet-lg:54px;--size-icon:16px;--size-icon-sm:14px;--size-dot:6px;

  /* radius · Figma Radius collection (no square corners) */
  --r-hairline:2px;--r-full:999px;

  /* elevation · Figma effect styles Elevation/* */
  --shadow-ring:inset 0 0 0 1px rgba(217,221,228,.24);
  --shadow-raised:0 24px 50px -30px rgba(25,28,35,.35);
  --shadow-floating:0 30px 60px -32px rgba(0,0,0,.7);
  --shadow-glass:0 10px 30px -18px rgba(0,0,0,.6);
  --glass-blur:blur(14px) saturate(140%);

  /* motion durations (easings above) */
  --dur-fast:.3s;--dur-base:.45s;--dur-slow:.6s;--dur-reveal:1s;--dur-cinematic:1.6s;
}