/* ============================================================
   MUDD BRUDDAS — DESIGN TOKENS
   Original identity. Deep "mudd" dark cinematic base +
   per-flavor exotic accent system. 60 / 30 / 10.
   ============================================================ */

:root {
  /* --- Core "mudd" neutrals (the 60%) --- */
  --mudd-black: #0a0807;
  --mudd-950: #0f0c0b;
  --mudd-900: #15110f;
  --mudd-800: #1e1917;
  --mudd-700: #2a2320;
  --mudd-600: #3a312c;

  /* --- Light / editorial (the 30%) --- */
  --bone: #f3ede2;
  --bone-200: #e7dfd1;
  --bone-dim: #b7ad9c;
  --ink: #15110f;

  /* --- Brand metal + text (the 10% + support) --- */
  --gold: #c9a227;
  --gold-soft: #e6ca63;
  --text-on-dark: #f3ede2;
  --text-dim: #a89d8d;
  --line-on-dark: rgba(243, 237, 226, 0.14);
  --line-on-light: rgba(21, 17, 15, 0.14);

  /* --- Exotic flavor accents (per-product tint) --- */
  --f-original: #c9772e;  /* roasted cola / bronze */
  --f-dragon:   #e83e7e;  /* dragonfruit magenta  */
  --f-lime:     #a6e22e;  /* lime                 */
  --f-volt:     #2e8be6;  /* blue raspberry       */
  --f-mango:    #f5a623;  /* mango                */
  --f-reign:    #9a57f0;  /* grape                */

  /* default active flavor (hero / crack-the-can) */
  --flavor: var(--f-original);

  /* --- Fluid type scale (clamp = no fixed desktop sizes) --- */
  --fs-eyebrow: clamp(0.68rem, 0.62rem + 0.3vw, 0.8rem);
  --fs-label:   clamp(0.72rem, 0.66rem + 0.3vw, 0.86rem);
  --fs-body:    clamp(1rem, 0.96rem + 0.25vw, 1.12rem);
  --fs-lead:    clamp(1.15rem, 1rem + 0.9vw, 1.6rem);
  --fs-h3:      clamp(1.4rem, 1.1rem + 1.6vw, 2.3rem);
  --fs-h2:      clamp(2.2rem, 1.3rem + 4.2vw, 5rem);
  --fs-display: clamp(3.2rem, 1.2rem + 12vw, 13rem);
  --fs-mega:    clamp(2.6rem, 0.6rem + 11vw, 11rem);

  /* --- Fluid spacing --- */
  --space-1: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
  --space-2: clamp(0.75rem, 0.6rem + 0.6vw, 1.1rem);
  --space-3: clamp(1rem, 0.8rem + 1vw, 1.75rem);
  --space-4: clamp(1.5rem, 1.1rem + 1.8vw, 3rem);
  --space-5: clamp(2.25rem, 1.5rem + 3.2vw, 5rem);
  --space-6: clamp(3.5rem, 2.2rem + 5.5vw, 8.5rem);

  /* --- Structure --- */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 3.5rem);
  --maxw: 1600px;
  --maxw-read: 68ch;
  --radius: 4px;
  --radius-lg: 10px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 0.25s;
  --dur-2: 0.5s;
  --dur-3: 0.9s;

  /* --- Layering --- */
  --z-nav: 60;
  --z-menu: 80;
  --z-cart: 90;
  --z-portal: 95;
  --z-modal: 100;

  --header-h: clamp(56px, 6vh, 76px);
}