/* ============================================================
   GOOSEBORO DRIVE-IN — DESIGN TOKENS
   Drop-in custom properties for the whole site.
   Palette pulled from the building: diner-blue siding,
   red sign border, paper-plate cream, tray mustard, dusk navy.
   ============================================================ */

@font-face { font-family: "Bebas Neue"; src: url('../assets/bebas-neue.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Yellowtail"; src: url('../assets/yellowtail.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url('../assets/work-sans.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }

:root {
  /* ---- Brand color ---- */
  --gb-blue:        #2E8CD8;  /* siding / sign blue */
  --gb-blue-deep:   #155FA8;  /* pressed blue, links hover */
  --gb-navy:        #0E1726;  /* dusk navy — hero overlay, footer */
  --gb-navy-soft:   #16233A;  /* raised dark surface */
  --gb-red:         #D8462F;  /* sign border / tray red — primary CTA */
  --gb-red-deep:    #AE3320;  /* pressed red */
  --gb-cream:       #FAF3E3;  /* page background, paper plate */
  --gb-paper:       #FFF9EC;  /* card paper */
  --gb-mustard:     #F2B23E;  /* accent — stars, highlights */
  --gb-sky:         #8FC7EE;  /* soft accent, badges */
  --gb-ink:         #1A1410;  /* warm near-black text */
  --gb-ink-soft:    #57493C;  /* secondary text */

  /* ---- Semantic ---- */
  --gb-bg:          var(--gb-cream);
  --gb-surface:     var(--gb-paper);
  --gb-text:        var(--gb-ink);
  --gb-text-soft:   var(--gb-ink-soft);
  --gb-accent:      var(--gb-red);
  --gb-accent-2:    var(--gb-blue);
  --gb-focus:       var(--gb-mustard);

  /* ---- Typography ----
     Load: Bebas Neue (display), Yellowtail (script), Work Sans (body)
     <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Yellowtail&family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
  */
  --gb-font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --gb-font-script:  "Yellowtail", "Brush Script MT", cursive;
  --gb-font-body:    "Work Sans", system-ui, sans-serif;

  --gb-fs-hero:    clamp(4.5rem, 14vw, 12rem);
  --gb-fs-h2:      clamp(3rem, 7vw, 6rem);
  --gb-fs-h3:      clamp(1.75rem, 3vw, 2.5rem);
  --gb-fs-script:  clamp(1.5rem, 3vw, 2.25rem);
  --gb-fs-body:    1.0625rem;
  --gb-fs-small:   0.875rem;

  /* ---- Rhythm ---- */
  --gb-space-section: clamp(5rem, 12vw, 9rem);
  --gb-container: 76rem;
  --gb-gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---- Shape ---- */
  --gb-radius-s: 0.375rem;
  --gb-radius-m: 0.75rem;
  --gb-radius-l: 1.25rem;

  /* ---- Retro hard shadows (offset, no blur) ---- */
  --gb-shadow-hard:        6px 6px 0 var(--gb-ink);
  --gb-shadow-hard-red:    6px 6px 0 var(--gb-red);
  --gb-shadow-hard-blue:   6px 6px 0 var(--gb-blue);
  --gb-shadow-hard-hover:  3px 3px 0 var(--gb-ink);
  --gb-shadow-card:        0 1px 2px rgb(26 20 16 / 0.08), 0 12px 32px -12px rgb(26 20 16 / 0.25);

  /* ---- Motion ---- */
  --gb-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --gb-ease-snap:  cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */
  --gb-dur-fast:   160ms;
  --gb-dur-med:    420ms;
  --gb-dur-slow:   900ms;

  /* ---- Checkerboard trim (diner valance) ---- */
  --gb-checker-size: 22px;
  --gb-checker: conic-gradient(var(--gb-ink) 25%, var(--gb-cream) 0 50%, var(--gb-ink) 0 75%, var(--gb-cream) 0);
}

/* Dark sections (story strip, footer) */
.gb-theme-dark {
  --gb-bg: var(--gb-navy);
  --gb-surface: var(--gb-navy-soft);
  --gb-text: var(--gb-cream);
  --gb-text-soft: #B9C4D6;
  --gb-shadow-hard: 6px 6px 0 rgb(0 0 0 / 0.55);
  background: var(--gb-navy);
  color: var(--gb-text);
}