/* =====================================================================
   naked · Naturweinmesse — Design Tokens
   Single source of truth. Change values here, the whole site follows.
   Extracted 1:1 from Figma (VLmWbjJg9hUwDUcM8J5lyQ).
   ===================================================================== */

:root {
  /* ---------- Color · brand ------------------------------------------ */
  --c-inky:            #2a272e;   /* primary text / near-black          */
  --c-inky-400:        #9d97a5;   /* muted text                         */

  --c-fuzzy-berry:     #ff00ce;   /* signature magenta                  */
  --c-fuzzy-berry-800: #570547;
  --c-fuzzy-berry-900: #2d0625;

  --c-fine-wine:       #2b00ff;   /* electric blue                      */
  --c-fine-wine-300:   #9c8bee;
  --c-fine-wine-500:   #2b00ff;

  --c-purely-naked:     #fbd3f1;  /* soft pink surface                  */
  --c-purely-naked-50:  #f9f5f8;  /* page background (off-white pink)   */
  --c-purely-naked-100: #f2e3ee;
  --c-purely-naked-200: #ebc2e0;  /* input border / overlay tint        */
  --c-purely-naked-400: #e756c3;
  --c-purely-naked-600: #b50c8b;
  --c-purely-naked-800: #500c3f;
  --c-purely-naked-900: #290a21;  /* darkest plum                       */

  --c-warm-flow:       #eef2df;   /* pale green                         */
  --c-zest-800:        #572c05;
  --c-light:           #ffffff;
  --c-black:           #000000;

  /* overlay backdrop */
  --c-overlay:         rgba(235, 194, 224, 0.90);

  /* ---------- Semantic aliases --------------------------------------- */
  --bg-page:      var(--c-purely-naked-50);
  --text-base:    var(--c-inky);
  --text-muted:   var(--c-inky-400);
  --accent:       var(--c-fuzzy-berry);

  /* ---------- Typography · families --------------------------------- */
  /* Real fonts drop into /assets/fonts (see fonts.css). Fallbacks keep
     the layout honest until then.                                       */
  --font-body:    "Serial Blur", "Helvetica Neue", Arial, sans-serif;
  /* Serial Blur is variable (wght 80–200). This is the "Medium-ish" body weight. */
  --fw-body: 130;
  --font-display: "NAKED Sketch", "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  --font-mono:    "Geist", ui-sans-serif, system-ui, sans-serif;

  /* ---------- Typography · fluid scale ------------------------------
     clamp(min @ mobile, preferred @ 1728 ref, max @ desktop).
     Desktop max == the exact Figma px value.                          */
  --fs-topper:      clamp(0.9rem, 0.6vw + 0.75rem, 1.25rem);   /* 20px  */
  --fs-label:       clamp(0.95rem, 0.4vw + 0.85rem, 1.125rem); /* 18px  */
  --fs-head:        clamp(1.25rem, 1.4vw + 0.6rem, 1.875rem);  /* 30px  */
  --fs-copy:        clamp(1.375rem, 1vw + 0.9rem, 1.875rem);   /* 30px  */
  --fs-sketch-sm:   clamp(1.5rem, 1vw + 1rem, 2.25rem);        /* 36px  */
  --fs-sketch-md:   clamp(1.75rem, 1.4vw + 1rem, 1.875rem);    /* 30px  */
  --fs-tagline:     clamp(1.125rem, 0.6vw + 0.9rem, 1.5rem);   /* 24px  */

  --fs-number:      clamp(6rem, 17vw, 18.75rem);               /* 300px */
  --fs-manifesto:   clamp(2.35rem, 6vw, 6.25rem);              /* 100px */
  --fs-cell:        clamp(4rem, 9vw, 8.125rem);                /* 130px */

  --fs-badge:       clamp(0.9rem, 0.5vw + 0.75rem, 1.125rem);  /* ~18px */
  --fs-copyright:   0.8125rem;                                 /* 13px  */

  /* ---------- Spacing scale ----------------------------------------- */
  --sp-2:   2px;
  --sp-4:   4px;
  --sp-8:   8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-20: 20px;
  --sp-30: 30px;
  --sp-40: 40px;
  --sp-50: 50px;
  --sp-56: 56px;
  --sp-60: 60px;
  --sp-70: 70px;
  --sp-80: 80px;
  --sp-90: 90px;
  --sp-100: 100px;
  --sp-110: 110px;
  --sp-150: 150px;
  --sp-200: 200px;
  --sp-230: 230px;

  /* ---------- Layout ------------------------------------------------- */
  --content-max: 1668px;   /* inner content width at 1728 canvas        */
  --gutter:      30px;     /* page side padding                         */
  --gutter-lg:   100px;    /* footer side padding                       */

  /* ---------- Radii -------------------------------------------------- */
  --r-sm:   10px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   25px;
  --r-pill: 1000px;

  /* ---------- Motion (used by later animation layer) ---------------- */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    240ms;
  --dur-med:     480ms;
  --dur-slow:    720ms;
  --spin-dur:    22s;      /* save-the-date ring rotation               */

  /* ---------- Elevation --------------------------------------------- */
  --shadow-float: 0 10px 40px rgba(41, 10, 33, 0.14);
}