/* ============================================================
   AU TAQUET — Design Tokens
   Concept français de Competitive Socializing
   Café-PMU-brasserie revisité, pop, ludique, nostalgique 70-80s
   ============================================================ */

/* ---------- Fonts ---------------------------------------------
   ALL BRAND FONTS NOW LOCAL (in fonts/). No substitutions needed.
   ------------------------------------------------------------ */

@font-face {
  font-family: "Roc Grotesk Compressed";
  src: url("fonts/roc-grotesk-compressed-black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LCT Picon Extended";
  src: url("fonts/LCTPicon-ExtendedMedium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LCT Picon Extended";
  src: url("fonts/LCTPicon-ExtendedExtra-bold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fenway Park JF";
  src: url("fonts/FenwayParkJF-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Boldstrom";
  src: url("fonts/Boldstrom-D.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ----------------------------------------------------------
     COLOR — Brand palette
     Names come from the brand: ingredient / object metaphors
  ---------------------------------------------------------- */

  /* Primaries */
  --c-bavette:     #ED2230; /* Red "bavette" — primary, signage, logo field */
  --c-pissenlit:   #F4BF33; /* Yellow "pissenlit" — secondary, highlights   */

  /* Greens — bottle */
  --c-bouteille:       #20674C; /* main bottle green */
  --c-bouteille-dark:  #114131; /* deep bottle green, surfaces */

  /* Inks & creams */
  --c-encre:       #1B223F; /* navy "encre" — copy on light bg */
  --c-lait:        #DAD1BE; /* cream "lait" — copy on dark bg / default bg */
  --c-charrette:   #4757A6; /* blue "charrette" — accent */
  --c-rose-pale:   #EFE3D4; /* soft beige-pink — editorial bg */
  --c-paper:       #F5EFE3; /* kraft paper warm white */
  --c-noir:        #0E0E10; /* near-black */

  /* Greys (derived from encre) */
  --c-encre-70:    rgba(27, 34, 63, 0.70);
  --c-encre-50:    rgba(27, 34, 63, 0.50);
  --c-encre-25:    rgba(27, 34, 63, 0.25);
  --c-encre-10:    rgba(27, 34, 63, 0.10);

  /* ----------------------------------------------------------
     SEMANTIC COLOR
  ---------------------------------------------------------- */
  --bg:            var(--c-lait);     /* default background — crème */
  --bg-alt:        var(--c-paper);    /* alternate warm bg          */
  --bg-editorial:  var(--c-rose-pale);
  --bg-dark:       var(--c-bouteille-dark);
  --bg-ink:        var(--c-encre);

  --fg:            var(--c-encre);    /* default text on light bg   */
  --fg-on-dark:    var(--c-lait);     /* text on dark bg            */
  --fg-muted:      var(--c-encre-70);
  --fg-subtle:     var(--c-encre-50);

  --accent:        var(--c-bavette);
  --accent-2:      var(--c-pissenlit);
  --accent-3:      var(--c-charrette);
  --accent-4:      var(--c-bouteille);

  --border:        var(--c-encre);
  --border-soft:   var(--c-encre-25);

  /* ----------------------------------------------------------
     TYPOGRAPHY — Font stacks
     Brand intent shown in comments; Google fallback used now.
  ---------------------------------------------------------- */
  /* Brand: Roc Grotesk Compressed Black (LOCAL) — display */
  --font-display:  "Roc Grotesk Compressed", "Anton", "Oswald", Impact, sans-serif;

  /* Brand: LCT Picon Extended (LOCAL) — primary geometric extended grotesk */
  --font-sans:     "LCT Picon Extended", "Outfit", "Archivo", system-ui, sans-serif;

  /* Brand: Fenway Park JF (LOCAL) — handwritten script */
  --font-script:   "Fenway Park JF", "Caveat", "Reenie Beanie", cursive;

  /* Brand: Boldstrom (LOCAL) — tagline chunky retro */
  --font-tagline:  "Boldstrom", "Bowlby One", "Bungee", Impact, sans-serif;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Scale
     Designed for posters + UI. Bold contrasts.
  ---------------------------------------------------------- */
  --fs-display-xxl: clamp(72px, 14vw, 220px);
  --fs-display-xl:  clamp(56px, 9vw,  140px);
  --fs-display-l:   clamp(40px, 6vw,  88px);
  --fs-h1:          clamp(32px, 4.5vw, 56px);
  --fs-h2:          28px;
  --fs-h3:          22px;
  --fs-h4:          18px;
  --fs-body:        16px;
  --fs-small:       14px;
  --fs-micro:       12px;

  --lh-display:     0.88;
  --lh-tight:       1.05;
  --lh-snug:        1.2;
  --lh-body:        1.5;
  --lh-loose:       1.7;

  --ls-display:     -0.01em;
  --ls-caps-tight:  0.02em;
  --ls-caps-wide:   0.14em;

  /* ----------------------------------------------------------
     SPACING — 4px base, ramps up generously for poster work
  ---------------------------------------------------------- */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  128px;

  /* ----------------------------------------------------------
     RADII — limited & deliberate (PMU enamel signs are sharp)
     Big rounded losange-tip pill is the iconic shape.
  ---------------------------------------------------------- */
  --r-0:    0;
  --r-1:    2px;
  --r-2:    6px;
  --r-3:    10px;
  --r-pill: 999px;
  --r-losange: 50% / 18%; /* horizontal losange pill (logo shape)         */

  /* ----------------------------------------------------------
     BORDERS — heavy ink lines, like enamel signage
  ---------------------------------------------------------- */
  --bw-1: 1.5px;
  --bw-2: 2.5px;
  --bw-3: 4px;
  --bw-4: 6px;

  /* ----------------------------------------------------------
     SHADOWS — minimal, mostly offset hard "sticker" shadows
     No soft blurry shadows. Print/enamel logic.
  ---------------------------------------------------------- */
  --shadow-sticker-sm: 3px 3px 0 var(--c-encre);
  --shadow-sticker-md: 6px 6px 0 var(--c-encre);
  --shadow-sticker-lg: 10px 10px 0 var(--c-encre);
  --shadow-soft:       0 6px 24px rgba(27, 34, 63, 0.12);

  /* ----------------------------------------------------------
     MOTION
  ---------------------------------------------------------- */
  --ease-snap:   cubic-bezier(0.2, 0.9, 0.25, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:      120ms;
  --t-base:      200ms;
  --t-slow:      400ms;
}

/* ============================================================
   SEMANTIC TYPE — element defaults
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size:   var(--fs-body);
  line-height: var(--lh-body);
  color:       var(--fg);
  background:  var(--bg);
  font-weight: 500;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 900; /* Roc Grotesk Compressed Black */
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); letter-spacing: var(--ls-caps-tight); }

.display-xxl { font-family: var(--font-display); font-size: var(--fs-display-xxl); line-height: var(--lh-display); text-transform: uppercase; letter-spacing: var(--ls-display); }
.display-xl  { font-family: var(--font-display); font-size: var(--fs-display-xl);  line-height: var(--lh-display); text-transform: uppercase; letter-spacing: var(--ls-display); }
.display-l   { font-family: var(--font-display); font-size: var(--fs-display-l);   line-height: var(--lh-display); text-transform: uppercase; letter-spacing: var(--ls-display); }

.tagline {
  font-family: var(--font-tagline);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps-wide);
}

.script {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1;
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps-wide);
}

p { margin: 0 0 var(--s-4) 0; max-width: 65ch; text-wrap: pretty; }
small { font-size: var(--fs-small); color: var(--fg-muted); }
strong { font-weight: 700; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--t-fast) var(--ease-snap);
}
a:hover { color: var(--c-encre); }