/* Pan D Endz design tokens. Written by the Director. Workers: use these, never invent values.
   Theme colors can be overridden at runtime by content.js from site.json (the admin panel edits that file later). */

:root {
  /* ---- Color: dark world (the film, the footer) ---- */
  --char: #120A05;          /* Pimento Char, dark canvas. Never flat black. */
  --coal: #2B1A0F;          /* Coal Brown, raised surface on dark */
  --cork: #4A3626;          /* hairlines and dividers on dark */
  --cream: #FFF0D9;         /* Festival Cream, all text on dark. Never pure white. */
  --cream-muted: #C9B8A3;   /* secondary text on dark, 10.1:1 on char */
  --gold: #FFC52E;          /* Flag Gold, the accent on dark, 12.4:1 on char */
  --bonnet: #E4501B;        /* Scotch Bonnet, ember accent on dark. Large type and graphics only (5.1:1 on char) */

  /* ---- Color: light world (menu, grocery, reviews, visit) ---- */
  --paper-cold: #FFF0D9;    /* paper at heat 0 */
  --paper-hot: #FFDDB8;     /* paper at heat 1 */
  --ink: #1D140E;           /* body text on paper, 16:1 */
  --ink-muted: #5C4A3D;     /* secondary text on paper, 7.5:1 on cold paper */
  --green: #0E6B36;         /* Yard Green, headings and buttons on paper, 5.9:1 on cold paper */
  --bonnet-deep-cold: #B23A0E; /* orange text on paper at heat 0, 5.3:1 */
  --bonnet-deep-hot: #8F2C07;  /* orange text on paper at heat 1, keeps AA on hot paper */
  --rule: #E2CDAE;          /* hairlines on paper */

  /* ---- The temperature. 0 = cold, 1 = fyah. Set only by heat.js. ---- */
  --heat: 0;
  --paper: color-mix(in oklab, var(--paper-hot) calc(var(--heat) * 100%), var(--paper-cold));
  --bonnet-deep: color-mix(in oklab, var(--bonnet-deep-hot) calc(var(--heat) * 100%), var(--bonnet-deep-cold));
  --glow: color-mix(in oklab, var(--bonnet) calc(var(--heat) * 100%), var(--gold));

  /* ---- Type ---- */
  --font-display: "Fraunces Variable", "Fraunces", Georgia, serif;
  --font-sign: "Bungee", "Arial Black", sans-serif;
  --font-body: "Hanken Grotesk Variable", "Hanken Grotesk", system-ui, sans-serif;

  --fs-mega: clamp(3.75rem, 15vw, 16rem);   /* the wordmark only */
  --fs-d1: clamp(2.75rem, 8vw, 8rem);
  --fs-d2: clamp(2.125rem, 5vw, 4.5rem);
  --fs-d3: clamp(1.5rem, 2.6vw, 2.25rem);
  --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
  --fs-small: 0.875rem;
  --fs-label: clamp(0.6875rem, 0.65rem + 0.15vw, 0.8125rem); /* Bungee labels */

  --lh-display: 0.92;
  --lh-body: 1.55;
  --track-label: 0.08em;
  --track-display: -0.02em;

  /* Fraunces axes */
  --fraunces-soft: "SOFT" 100, "WONK" 0;
  --fraunces-wonk: "SOFT" 100, "WONK" 1;   /* italics and emphasized words */

  /* ---- Space (8px base) ---- */
  --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-5: 3rem; --s-6: 4.5rem; --s-7: 7rem; --s-8: 11rem;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 62ch;

  /* ---- Shape ---- */
  --r-pill: 999px;
  --r-tag: 6px;       /* price tags and sign boards only. No rounded card grids anywhere. */

  /* ---- Motion: everything moves like smoke and heat ---- */
  --ease-smoke: cubic-bezier(0.22, 0.61, 0.21, 1);   /* slow rise, soft settle */
  --ease-snap: cubic-bezier(0.7, 0, 0.2, 1);
  --t-fast: 180ms; --t-med: 420ms; --t-slow: 900ms;

  /* ---- Layers ---- */
  --z-film: 1; --z-beats: 5; --z-embers: 6; --z-grain: 7; --z-nav: 50; --z-thermo: 55; --z-overlay: 80;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-med: 1ms; --t-slow: 1ms; }
}