/* ============================================================
   MILKY LANE · DESIGN TOKENS
   Values copied verbatim from :root in home.css on the live
   Milky Lane build, 21 October 2026.

   Use these names. The food truck page currently declares its
   own short names (--pink, --cyan, --ink, --muted, --border).
   The values are correct, the names are not. Renaming them
   means the two codebases read the same and a future merge
   into the main site is a copy and paste.

   Load after ml-fonts.css, before the page stylesheet.
   ============================================================ */

:root {

  /* ---------- Grounds ---------- */
  --ml-black:      #050505;   /* deepest ground, hero overlays */
  --ml-ink:        #0E0E10;   /* default page background */
  --ml-charcoal:   #161618;   /* raised cards and panels on ink */
  --ml-cream:      #FFF7E8;   /* light "paper" sections */
  --ml-white:      #FFFFFF;

  /* ---------- Brand ---------- */
  --ml-pink:        #FF8CE0;
  --ml-pink-bright: #FF8CE0;  /* alias, same value */
  --ml-blue:        #5BD0E6;
  --ml-blue-deep:   #5BD0E6;  /* alias, same value */
  --ml-yellow:      #5BD0E6;  /* legacy alias, now cyan. No new uses. */

  /* Brand pink is #FF8CE0, which is 1.96:1 on the light paper
     sections, unreadable. This is the same hue taken deeper
     until it clears 4.5:1 on paper (4.59:1), so it covers body
     copy and display type both. Use it anywhere pink type sits
     on a light ground. Never --ml-pink on cream or white. */
  --ml-pink-on-paper: #BD3D9A;

  /* ---------- Type colour ---------- */
  --ml-text:     #E9E9EE;              /* body copy on ink, 16.7:1 */
  --ml-text-dim: #B7B7BD;              /* captions and meta ONLY */
  --ml-border:   rgba(255,255,255,0.08);

  /* ---------- Families ---------- */
  --display: "Anton", "Bebas Neue", Impact, sans-serif;
  --script:  "Driftline ML", "Brush Script MT", cursive;
  --tag:     "Anton", "Bebas Neue", Impact, sans-serif;
  --body:    "Inter", system-ui, -apple-system, sans-serif;

  /* ---------- Shape ---------- */
  --radius:    18px;
  --radius-lg: 28px;
  --max:       1320px;

  /* These are black, not pink and blue, despite the names. A
     pink shadow under a pink button reads as a halo, not depth,
     which is the same effect as a 0 0 glow just offset. Black
     keeps the lift and drops the bloom. The names were kept so
     nothing downstream had to change. Do not "fix" them back
     to coloured shadows. */
  --shadow-pink: 0 20px 60px -20px rgba(0,0,0,0.55);
  --shadow-blue: 0 20px 60px -20px rgba(0,0,0,0.45);
}

/* ============================================================
   REFERENCE · the main site's base metrics, for alignment
   ------------------------------------------------------------
   Not a drop-in override, these are the numbers to match in the
   page stylesheet.

   section            padding: 120px 0;
   content column     max-width: var(--max);   // 1320px

   .btn {
     display: inline-flex; align-items: center;
     justify-content: center; gap: 10px;
     padding: 16px 28px;
     border-radius: 999px;
     font-family: var(--display);
     font-size: 18px;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     white-space: nowrap;
     transition: transform .2s ease, box-shadow .25s ease,
                 background .25s ease, color .25s ease;
   }

   Hero h1 {
     font-family: var(--display);
     text-transform: uppercase;
     font-size: clamp(56px, 9vw, 140px);
     line-height: 0.88;
     letter-spacing: -1px;
     margin-bottom: 24px;
   }

   Headings are written in TITLE CASE in the markup and
   uppercased in CSS. "Enter Feast Mode." not "ENTER FEAST MODE."
   ============================================================ */