@import url("https://fonts.googleapis.com/css2?family=Bagel+Fat+One&display=swap");
/* ============================================================
   Burgo — Colors & Type Tokens
   Source of truth for the Burgo Design System.
   Confirmed by the official Color Palette CMYK sheet (Apr 2026).
   ============================================================ */

@font-face {
  font-family: "Burgo Display";
  /* The proprietary "LCT Mogi" rubber-hose display face — REAL files installed
     Apr 2026. The family ships in three cuts (A, B, C). We register all three
     under "LCT Mogi" with weight 400/500/600 so designers can pick a cut by
     setting font-weight, AND we set the canonical brand display = LCT Mogi A
     (the logotype cut) on --font-display. */
  src: url("fonts/LCTMogi-A.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LCT Mogi";
  src: url("fonts/LCTMogi-A.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LCT Mogi";
  src: url("fonts/LCTMogi-B.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LCT Mogi";
  src: url("fonts/LCTMogi-C.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Direct-access aliases for designers who want to specify a specific cut */
@font-face {
  font-family: "LCT Mogi A";
  src: url("fonts/LCTMogi-A.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "LCT Mogi B";
  src: url("fonts/LCTMogi-B.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "LCT Mogi C";
  src: url("fonts/LCTMogi-C.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Anonymous Pro — REAL font files supplied by the brand team (Apr 2026) */
@font-face {
  font-family: "Anonymous Pro";
  src: url("fonts/AnonymousPro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anonymous Pro";
  src: url("fonts/AnonymousPro-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Anonymous Pro";
  src: url("fonts/AnonymousPro-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anonymous Pro";
  src: url("fonts/AnonymousPro-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Instrument Sans — REAL variable font files (wdth + wght axes) */
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-VariableFont_wdth,wght.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-Italic-VariableFont_wdth,wght.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}

/* Schoolbell — REAL font file */
@font-face {
  font-family: "Schoolbell";
  src: url("fonts/Schoolbell-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Inclusive Sans — REAL variable font (uploaded Apr 2026).
   Role TBD — see README. Installed as an alternate body family
   accessible via --font-body-inclusive. */
@font-face {
  font-family: "Inclusive Sans";
  src: url("fonts/InclusiveSans-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inclusive Sans";
  src: url("fonts/InclusiveSans-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

/* Bagel Fat One (Google Fonts) kept as a fallback behind the real LCT Mogi files — @import moved to the top of this file (CSS requires @import before other rules). */

:root {
  /* ---------- RAW PALETTE (from CMYK sheet) ---------- */

  /* Primary */
  --burgo-panna:        #FFF7E3; /* PANNA / BEIGE CHIARO  — Pantone 7499 C */
  --burgo-marrone-scuro:#443018; /* MARRONE SCURO         — Pantone Black 4 C */
  --burgo-caramello:    #B07533; /* MARRONE CALDO/CARAMELLO — Pantone 7573 C */

  /* Secondary */
  --burgo-rosa:         #FF7FE5; /* ROSA ACCESO           — Pantone 2375 C */
  --burgo-giallo:       #FFF049; /* GIALLO BRILLANTE      — Pantone 101 C */
  --burgo-rosso:        #FF3816; /* ROSSO ARANCIATO       — Pantone 172 C */

  /* Neutral / accent */
  --burgo-verde:        #A7D57C; /* VERDE SOFT (Lettuce)  — Pantone 366 C */
  --burgo-azzurro:      #B5CDFD; /* AZZURRO POLVERE (cap) — Pantone 2717 C */

  /* Utility */
  --burgo-black:        #000000;
  --burgo-white:        #FFFFFF;

  /* ---------- SEMANTIC COLOR TOKENS ---------- */
  --bg:                 var(--burgo-panna);
  --bg-alt:             #FEFBEA;            /* slightly warmer cream for cards */
  --bg-dark:            var(--burgo-marrone-scuro);
  --surface:            #FFFFFF;
  --surface-cream:      var(--burgo-panna);

  --fg:                 var(--burgo-marrone-scuro);
  --fg-on-dark:         var(--burgo-panna);
  --fg-muted:           rgba(68, 48, 24, 0.62);
  --fg-faint:           rgba(68, 48, 24, 0.40);

  --primary:            var(--burgo-rosa);          /* hot-pink stop visivo */
  --primary-ink:        var(--burgo-marrone-scuro); /* shadow under logo */
  --secondary:          var(--burgo-caramello);     /* warm brown accent */

  --accent-yellow:      var(--burgo-giallo);
  --accent-red:         var(--burgo-rosso);
  --accent-green:       var(--burgo-verde);
  --accent-blue:        var(--burgo-azzurro);

  --line:               var(--burgo-marrone-scuro); /* outlines are always thick + dark */
  --line-soft:          rgba(68, 48, 24, 0.22);

  /* Menu lines (decided 4 Apr 2026) */
  --line-family:        var(--burgo-azzurro);
  --line-rosetta:       var(--burgo-rosa);
  --line-veggie:        var(--burgo-verde);

  /* Status / availability indicators (in-store "Disponibilità Giornaliera") */
  --status-ok:          #4FA84A;  /* green */
  --status-low:         var(--burgo-giallo);
  --status-out:         var(--burgo-rosso);

  /* ---------- TYPOGRAPHY FAMILIES ---------- */
  --font-display:       "LCT Mogi", "Burgo Display", "Bagel Fat One", system-ui, sans-serif;
  --font-body:          "Instrument Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body-inclusive:"Inclusive Sans", "Instrument Sans", system-ui, sans-serif; /* accessibility-leaning alt */
  --font-hand:          "Schoolbell", "Bradley Hand", cursive;       /* annotations, tags, "*Color Palette" caption */
  --font-mono:          "Anonymous Pro", ui-monospace, "SF Mono", Menlo, monospace; /* receipts, prices, tickets */

  /* ---------- TYPE SCALE (modular 1.25 mobile / 1.333 desktop) ---------- */
  --fs-micro:    11px;   /* legal, ingredients */
  --fs-caption:  13px;   /* captions, tags */
  --fs-body:     16px;   /* body */
  --fs-body-lg:  18px;
  --fs-h6:       20px;
  --fs-h5:       24px;
  --fs-h4:       32px;
  --fs-h3:       44px;
  --fs-h2:       64px;
  --fs-h1:       96px;
  --fs-display:  144px;  /* poster / insegna */

  --lh-tight:    1.05; /* @kind other */
  --lh-snug:     1.2; /* @kind other */
  --lh-normal:   1.45; /* @kind other */
  --lh-relaxed:  1.6; /* @kind other */

  --tracking-display: -0.01em;
  --tracking-caps:    0.06em;

  /* ---------- SPACING (4px base) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- RADII ---------- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* ---------- BORDERS ---------- */
  --bw-1: 2px;
  --bw-2: 3px;
  --bw-3: 5px;        /* signature thick cartoon outline */
  --bw-4: 8px;

  /* ---------- SHADOWS (cartoon "ombra solida") ---------- */
  /* The brand uses solid offset shadows, not soft drop shadows. */
  --shadow-pop-sm:  4px 4px 0 0 var(--burgo-marrone-scuro);
  --shadow-pop-md:  8px 8px 0 0 var(--burgo-marrone-scuro);
  --shadow-pop-lg:  12px 12px 0 0 var(--burgo-marrone-scuro);
  --shadow-pop-pink: 6px 6px 0 0 var(--burgo-rosa);
  --shadow-soft:    0 2px 0 0 rgba(68, 48, 24, 0.18);

  /* ---------- MOTION ---------- */
  --ease-pop:    cubic-bezier(.34, 1.56, .64, 1); /* @kind other */ /* squishy bounce */
  --ease-out:    cubic-bezier(.22, 1, .36, 1); /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    420ms; /* @kind other */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  color: var(--fg);
  text-transform: uppercase;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); }
h6 { font-size: var(--fs-h6); font-family: var(--font-body); font-weight: 700; }

p, li { font-size: var(--fs-body); line-height: var(--lh-relaxed); }
small, .caption { font-size: var(--fs-caption); color: var(--fg-muted); }
.micro { font-size: var(--fs-micro); }

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-caps);
  font-weight: 600;
  color: var(--fg-muted);
}

.handwritten { font-family: var(--font-hand); font-weight: 400; }
.mono        { font-family: var(--font-mono); }

/* The "BURGO" logotype look: fill + solid offset brown shadow */
.burgo-logo-text {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--burgo-rosa);
  text-shadow:
     6px  6px 0 var(--burgo-marrone-scuro),
     6px  0   0 var(--burgo-marrone-scuro),
     0    6px 0 var(--burgo-marrone-scuro);
  letter-spacing: -0.01em;
}