/* ============================================================
   LA BARQUETTE — TOKENS
   Ported from the official Design System (claude.ai/design), with
   the two-red correction applied: rojo #850809 (accent) + vino #6B1C23 (surface).
   Butcher-shop editorial · dark/light alternation · no rounded corners.
   ============================================================ */

/* ---------- Fonts (self-hosted woff2, extracted from the brand build) ---------- */
@font-face {
  font-family: 'Utility Pro';
  font-weight: 700; font-style: normal; font-display: swap;
  src: url('../fonts/UtilityPro-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Babcock';
  font-weight: 400 700; font-style: normal; font-display: swap;
  src: url('../fonts/Babcock.woff2') format('woff2');
}
@font-face {
  font-family: 'Citrine';
  font-weight: 400 500; font-style: normal; font-display: swap;
  src: url('../fonts/Citrine-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Citrine';
  font-weight: 700; font-style: normal; font-display: swap;
  src: url('../fonts/Citrine-Bold.woff2') format('woff2');
}

:root {
  /* ---------- Brand palette (per the DS colors_and_type.css) ----------
     ROJO        #6B1C23 · the brand red — vino / burgundy. Marks, CTAs, eyebrows, hero surfaces. Pantone 1955 C
     CHOCOLATE   #3D2722 · primary dark ground / body bg — Pantone 462 C
     CREMA       #CBB397 · secondary text on dark, hairlines, italic-accent — Pantone 466 C
     BLANCO ROTO #EFEEED · primary text on dark, light-section bg — Pantone Cool Gray 1 C
     ------------------------------------------------------------------- */
  --rojo:         #6B1C23;
  --chocolate:    #3D2722;
  --crema-oscuro: #CBB397;
  --blanco-roto:  #EFEEED;
  --vino:         var(--rojo);  /* alias — same brand red */

  /* English aliases (used across the UI kit) */
  --red:        var(--rojo);
  --cream:      var(--crema-oscuro);
  --offwhite:   var(--blanco-roto);
  --white:      #ffffff;

  /* Screen-only derived helpers (NOT brand colours — blooms / glass) */
  --red-deep:       #4A0E13;               /* radial blooms behind chocolate */
  --red-glow:       rgba(107, 28, 35, .35); /* halos on --rojo */
  --vino-glow:      rgba(107, 28, 35, .35);
  --chocolate-deep: #2A1A17;              /* nav / glass surfaces, deepest scenes */

  /* ---------- Semantic fg / bg ---------- */
  --bg:             var(--chocolate);
  --bg-deep:        var(--chocolate-deep);
  --bg-light:       var(--offwhite);
  --fg1:            var(--offwhite);              /* primary text on dark */
  --fg2:            var(--cream);                 /* secondary text on dark */
  --fg-on-light:    var(--chocolate);
  --fg-muted-light: rgba(61, 39, 34, .78);
  --hairline-dark:  rgba(203, 179, 151, .18);
  --hairline-light: rgba(61, 39, 34, .18);

  /* ---------- Type families (three families, three jobs) ---------- */
  --font-display: 'Utility Pro', 'Bebas Neue', Impact, 'Arial Narrow', Arial, Helvetica, sans-serif; /* monumental headlines */
  --font-stamp:   'Babcock', 'Oswald', 'Bebas Neue', 'Arial Narrow', Arial, Helvetica, sans-serif;   /* eyebrows, buttons, tags, sellos — ALL CAPS */
  --font-heading: var(--font-stamp);                                                                 /* retrocompat alias */
  --font-body:    'Citrine', 'Courier Prime', 'Courier New', Georgia, 'Times New Roman', serif;      /* body + editorial italic */

  /* ---------- Easing (named, shared; --ease-hero is dominant) ---------- */
  --ease:        cubic-bezier(0.16, 1, 0.30, 1);
  --ease-hero:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.40, 0, 0.20, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Spacing / layout ---------- */
  --edge:      clamp(24px, 5vw, 80px);
  --maxw:      1400px;
  --section-y: clamp(100px, 14vh, 160px);
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 72px; --space-9: 120px;

  /* ---------- Radii (tight — editorial, never SaaS) ---------- */
  --radius-xs: 2px;   /* buttons, tags */
  --radius-sm: 4px;   /* cards */
  --radius-md: 6px;   /* dropdowns */
  --radius-pill: 999px;

  /* ---------- Tracking scale (this brand lives on letter-spacing) ---------- */
  --track-tight: -0.02em;      /* huge display */
  --track-snug:  -0.01em;      /* h1 / h2 */
  --track-loose:  0.08em;
  --track-eyebrow: 0.18em;
  --track-label:   0.28em;     /* eyebrows */
  --track-mega-label: 0.38em;  /* "MEAT BAR · MADRID" */

  /* ---------- Borders / shadows ---------- */
  --border-hairline: 1px solid var(--hairline-dark);
  --border-light:    1px solid var(--hairline-light);
  --shadow-soft: 0 6px 24px rgba(0,0,0,.18);
  --shadow-card: 0 20px 60px rgba(0,0,0,.50);
  --shadow-fav:  0 32px 80px rgba(0,0,0,.50);
  --shadow-cta:       0 6px 24px rgba(107,28,35,.30);
  --shadow-cta-hover: 0 12px 40px rgba(107,28,35,.50);
}