/* The Kabob Guy — design tokens, copied from the Claude Design system (tokens/*.css). Edit there first. */
:root{
  /* ---- Base palette (sampled from the truck wrap + menu board) ---- */
  --char-900:#101110;   /* wrap black — primary dark ground */
  --char-800:#1a1b19;
  --char-700:#262724;
  --char-600:#3b3c38;

  --gold-500:#ecaf01;   /* THE brand gold — logo disc, price tags, CTAs */
  --gold-600:#c99303;   /* pressed / darker gold */
  --gold-400:#f6c633;   /* hover / lighter gold */
  --gold-100:#fdf1cf;   /* gold wash tint */
  --gold-mark:#fdcf28;  /* the exact gold inside the logo SVG — reference only, do not use in UI */

  --ember-500:#e2560f;  /* flame orange, from the wrap fire graphics */
  --ember-600:#b73f08;

  --cream-100:#f4ece3;  /* warm paper ground */
  --cream-200:#e8ddd0;
  --cream-300:#d6c7b5;

  --white:#ffffff;
  --herb-500:#4b7f38;   /* success — herb green from the plates */
  --paprika-500:#b3261e;/* error — paprika red */

  --a-8:rgba(16,17,16,.08);
  --a-16:rgba(16,17,16,.16);
  --a-64:rgba(16,17,16,.64);
  --gold-a-24:rgba(236,175,1,.24);

  /* ---- Semantic aliases ---- */
  --text-body:var(--char-800);
  --text-heading:var(--char-900);
  --text-muted:var(--char-600);
  --text-inverse:var(--cream-100);
  --text-accent:var(--gold-500);
  --text-on-gold:var(--char-900);
  --text-link:var(--gold-600);
  --text-link-hover:var(--char-900);

  --surface-page:var(--cream-100);
  --surface-card:var(--white);
  --surface-dark:var(--char-900);
  --surface-gold:var(--gold-500);
  --surface-subtle:var(--cream-200);

  --border-hairline:var(--cream-300);
  --border-strong:var(--char-900);
  --border-gold:var(--gold-500);

  --focus-ring:var(--gold-500);
}
:root{
  /* families */
  --font-display:"Anton","Oswald","Arial Narrow",sans-serif; /* @kind font */
  --font-condensed:"Oswald","Arial Narrow",sans-serif; /* @kind font */
  --font-script:"Kaushan Script",cursive; /* @kind font */
  --font-body:"Barlow","Helvetica Neue",sans-serif; /* @kind font */
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace; /* @kind font */

  /* scale — display steps are deliberately far apart; the brand shouts or whispers.
     xl 56–104px hero · l 40–64px section titles · m 32px card titles */
  --fs-display-xl:clamp(3.5rem,8vw,6.5rem); /* @kind font */
  --fs-display-l:clamp(2.5rem,5vw,4rem); /* @kind font */
  --fs-display-m:2rem; /* @kind font */
  --fs-title:1.375rem; /* @kind font */
  --fs-lead:1.25rem; /* @kind font */
  --fs-body:1rem; /* @kind font */
  --fs-small:.875rem; /* @kind font */
  --fs-label:.75rem; /* @kind font */
  --fs-script:clamp(1.5rem,3vw,2.25rem); /* @kind font */

  /* line heights */
  --lh-display:.92; /* @kind other */
  --lh-title:1.15; /* @kind other */
  --lh-body:1.55; /* @kind other */
  --lh-tight:1.3; /* @kind other */

  /* tracking */
  --ls-display:.005em; /* @kind other */
  --ls-caps:.08em; /* @kind other */
  --ls-label:.14em; /* @kind other */
  --ls-body:0; /* @kind other */

  --fw-regular:400; /* @kind other */
  --fw-medium:500; /* @kind other */
  --fw-semibold:600; /* @kind other */
  --fw-bold:700; /* @kind other */
}
:root{
  /* 4px base, doubling-ish ramp */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --sp-9:96px; --sp-10:128px;

  --gutter:var(--sp-5);
  --section-y:var(--sp-9);
  --section-y-tight:var(--sp-8);
  --container-max:1200px; /* @kind spacing */
  --container-narrow:720px; /* @kind spacing */
  --measure:64ch; /* @kind other */
}
:root{
  /* radii — the brand is mostly hard-edged; only tags and pills round */
  --r-0:0px; /* @kind radius */
  --r-sm:2px; /* @kind radius */
  --r-md:4px; /* @kind radius */
  --r-pill:999px; /* @kind radius */
  --r-photo:0px; /* @kind radius */

  /* borders */
  --bw-hairline:1px; /* @kind spacing */
  --bw-strong:2px; /* @kind spacing */
  --bw-heavy:4px; /* @kind spacing */

  /* shadows — used sparingly; the brand prefers flat blocks on photo grounds */
  --shadow-card:0 1px 2px rgba(16,17,16,.06),0 8px 24px rgba(16,17,16,.08); /* @kind shadow */
  --shadow-raised:0 12px 32px rgba(16,17,16,.18); /* @kind shadow */
  --shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.12); /* @kind shadow */

  /* protection gradients for text over dish/truck photography */
  --scrim-bottom:linear-gradient(to top,rgba(16,17,16,.92) 0%,rgba(16,17,16,.72) 38%,rgba(16,17,16,0) 100%); /* @kind other */
  --scrim-left:linear-gradient(to right,rgba(16,17,16,.9) 0%,rgba(16,17,16,.45) 55%,rgba(16,17,16,0) 100%); /* @kind other */
  --scrim-flat:rgba(16,17,16,.55); /* @kind color */

  /* motion */
  --dur-fast:120ms; /* @kind other */
  --dur-base:200ms; /* @kind other */
  --dur-slow:420ms; /* @kind other */
  --ease-out:cubic-bezier(.2,.7,.3,1); /* @kind other */
  --ease-in-out:cubic-bezier(.5,0,.5,1); /* @kind other */
}