/* =========================================================================
   Miramar Brewing: design tokens
   Flat, geometric, black. No gradients anywhere: every surface is a solid.

   The system (agreed with Miguel, 2026-10-08):
   - Grid: 12 columns from 1024px, 8 columns from 640px, 4 below. Every count halves cleanly
     (12 → 6 → 3, 8 → 4 → 2, 4 → 2), so layouts split into halves and quarters at every size.
   - Spacing: 8px steps. Small steps inside a component (8–32), bigger between components
     (48–96), biggest between sections (128+).
   - Type: a 1.5 ratio on the root size (16px below 1024px, 18px from 1024px). Components
     pick a step (--t-0 … --t-6) per breakpoint instead of free sizes.
   (The ?tune sliders and grid overlay, a design-review tool, went before launch, 2026-11-03; in git.)
   ========================================================================= */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family: 'Anybody'; src: url('../assets/fonts/anybody-italic-latin.woff2') format('woff2'); font-weight: 100 900; font-stretch: 50% 150%; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Anybody'; src: url('../assets/fonts/anybody-italic-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-stretch: 50% 150%; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Martian Mono'; src: url('../assets/fonts/martian-mono-latin.woff2') format('woff2'); font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Martian Mono'; src: url('../assets/fonts/martian-mono-latin-ext.woff2') format('woff2'); font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('../assets/fonts/cabinet-grotesk-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('../assets/fonts/cabinet-grotesk-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('../assets/fonts/cabinet-grotesk-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('../assets/fonts/cabinet-grotesk-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  /* ---------- Color ---------- */
  --ink: #0A0A0A;
  --ink-2: #171717;
  --line: #2E2E2E;
  --cream: #F4EEE3;
  --cream-dim: #A8A298;

  /* The page: what the site sits on and what reads on it. Dark only: the light version (an
     off-white page under these same names, 2026-10-15) came out on 2026-10-26, the client keeps the
     dark page. --ink stays black everywhere: it's the text and shapes on every colored field. */
  --page: var(--ink);          /* the background, and the holes cut out to it */
  --page-2: var(--ink-2);      /* raised surfaces on it: the nav pills, the search, the cards */
  --on-page: var(--cream);     /* text and marks on the page */
  --on-page-dim: var(--cream-dim);
  --rule: var(--line);
  --inv: var(--cream);         /* a fill that stands out from the page (buttons, the burger, the dot) */
  --on-inv: var(--ink);
  --seal-c: #FFFFFF;           /* the Hecho en Puerto Rico mark: pure white, the only color for it (client, 2026-10-26: "it's an official stamp") */

  /* Brand + label palette, tuned for contrast on black.
     Rule: colored fields always carry --ink text (all ≥ 6:1). Cream text only on ink. */
  --mar: #009CCD;    /* Pantone 639U, unchanged */
  --cielo: #87D4EE;  /* Pantone 2975U, unchanged */
  --rosa: #FF9CC8;   /* Bacon */
  --parcha: #FFB619; /* Día Libre */
  --gallo: #FF5A36;  /* Papá Gallo's comb / flamboyán */
  --monte: #22B35B;  /* leaf green */

  --alu: #D3D6D7;
  --alu-2: #A5AAAD;
  --alu-3: #ECEEEE;

  /* ---------- Type ---------- */
  --f-display: 'Anybody', 'Arial Black', system-ui, sans-serif;
  --f-text: 'Cabinet Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* 1.5 scale on the root size: (16px / 18px) × 1.5^n */
  --t--1: .6667rem;   /* 10.7 / 12    mono labels */
  --t-0: 1rem;        /* 16 / 18      body */
  --t-1: 1.5rem;      /* 24 / 27      lead, tagline, card copy */
  --t-2: 2.25rem;     /* 36 / 40.5    tapes, card names */
  --t-3: 3.375rem;    /* 54 / 60.75   phone section titles */
  --t-4: 5.0625rem;   /* 81 / 91      beer names, tablet titles */
  --t-5: 7.5938rem;   /* 121.5 / 137  section titles */
  --t-6: 11.3906rem;  /* 182 / 205    reserved for one-off display */

  --lh-display: .86;
  --lh-head: 1.1;
  --lh-body: 1.5;     /* 16 × 1.5 = 24px, on the 8px rhythm */

  /* ---------- Spacing: 8px base ---------- */
  --s-0: 4px;         /* hairline gaps only (icon to text) */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;        /* largest step inside a component */
  --s-5: 48px;        /* smallest step between components */
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 128px;       /* between sections */
  --s-9: 192px;

  --r-1: 8px;
  --r-2: 16px;
  --r-3: 24px;
  --r-4: 32px;
  --r-5: 48px;
  --r-pill: 999px;

  /* ---------- Grid ---------- */
  --cols: 12;
  --margin: 40px;     /* outer page margin: nav, hero, sections, footer all sit on it */
  --gutter: 24px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --ease-spring: cubic-bezier(.34, 1.5, .64, 1);
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
  --ease-cream: cubic-bezier(.35, .05, .1, 1);  /* slower start, long soft landing */

  /* Hover timings (tuned by Miguel with the ?tune sliders, retired 2026-11-03).
     Fill, feel and shape morph set by Miguel with the tuner, 2026-10-08. */
  --ease-btn: var(--ease-out);
  --t-btn-fill: .9s;     /* button: color fill sweeping in */
  --t-btn-text: 1.1s;    /* button: label sliding up */
  --t-btn-color: 1s;     /* button: text + arrow color */
  --t-btn-arrow: 1.2s;   /* button: arrow turning ↗ → → */
  --t-letter: .7s;       /* hero: MIRAMAR letter color */
  --ease-shape: var(--ease-cream);
  --t-shape: .4s;        /* hero: fold shape morph */
  --t-card: .8s;         /* beers B: card opening across the row */

  /* ---------- Derived (older names the sections still use) ---------- */
  --frame: var(--margin);
  --pad: var(--margin);
  --gap: var(--gutter);
  --radius: var(--r-5);
  --bar: 56px;                                          /* nav pill height */
  --nav-h: calc(var(--margin) * 2 + var(--bar));        /* space the fixed nav takes */
  --section-pad: var(--s-8);
  --badge: 120px;                                       /* hero ring + seal */
  --az: var(--cream);                                   /* the A–Z folder */
}

@media (max-width: 1023px) {
  :root { --cols: 8; --margin: 32px; --gutter: 24px; --badge: 96px; }
}
@media (max-width: 639px) {
  :root { --cols: 4; --margin: 24px; --gutter: 16px; --bar: 48px; --radius: var(--r-4); --section-pad: var(--s-7); --badge: 96px; }
}

html { font-size: 100%; }
@media (min-width: 1024px) {
  html { font-size: 112.5%; }
}