/* South Broadway BID — design tokens (0.3.1 "ink & amber" system).
   Fonts: Inter Tight, Big Shoulders and Big Shoulders Inline — SIL Open Font License 1.1,
   self-hosted and subset to latin. No external CDN.

   Colour roles (do not blur them):
   · ink    → text, borders, sticker shadows, primary buttons
   · amber  → EMPHASIS: main CTA, big figures, decorative headline register
   · blue   → INTERACTION and TIME: links, focus, events, tinted dark bands
   · the 8 business-category colours live in inc/visual.php and own the directory/map only */
@font-face {
  font-family: 'Inter Tight';
  src: url('../fonts/inter-tight-latin-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Big Shoulders';
  src: url('../fonts/big-shoulders-latin-variable.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Big Shoulders Inline';
  src: url('../fonts/big-shoulders-inline-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Core neutrals */
  --ink: #141414;
  --ink-deep: #0a0a0a;
  --paper: #ffffff;
  --bg: #f7f7f5;
  --tint: #eeeeec;
  --muted: #5c5c5c;
  --line: #deddda;

  /* Amber — emphasis */
  --amber: #c08a2e;
  --amber-lift: #d9a03d;
  --amber-ink: #996e24;      /* amber as small text on light: 4.56:1 */
  --amber-soft: #f6eedd;

  /* Blue (Hudson) — interaction, events, tinted darks */
  --blue: #1d3f6e;
  --blue-ink: #1d3f6e;       /* link on light: 9.85:1 */
  --blue-on-dark: #8295af;   /* on --dark: 5.59:1 */
  --blue-soft: #e8ebf0;
  --on-dark: #e9ecf1;        /* text on any dark surface */
  --on-dark-muted: #a8b2c0;  /* secondary text on dark */
  --dark: #0e1c30;           /* tinted dark band */
  --dark-deep: #0b1626;      /* ticker, footer */

  /* Semantic (names used by templates) */
  --color-primary: var(--ink);
  --color-primary-hover: var(--ink-deep);
  --color-accent: var(--amber);
  --color-link: var(--blue-ink);
  --color-bg: var(--bg);
  --color-surface: var(--paper);
  --color-text: var(--ink);
  --color-muted: var(--muted);
  --color-border: var(--line);

  /* Shape & depth */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --border-bold: 2px solid var(--ink);
  --shadow-sticker-sm: 2px 2px 0 var(--ink);
  --shadow-sticker: 3px 3px 0 var(--ink);
  --shadow-sticker-lg: 6px 6px 0 var(--ink);
  --shadow-soft: 0 18px 40px -22px #14141455;

  /* Type — two registers: solid (Inter Tight) and decorative inline (Big Shoulders Inline) */
  --font-body: 'Inter Tight', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter Tight', system-ui, sans-serif;
  --font-inline: 'Big Shoulders Inline', 'Arial Narrow', Impact, sans-serif;
  --font-num: 'Big Shoulders', 'Arial Narrow', Impact, sans-serif;
  --inline-scale: 1.55;      /* Big Shoulders is condensed: it needs more body for equal weight */
  --text-xs: .8125rem;
  --text-sm: .9375rem;
  --text-md: 1.0625rem;
  --text-lg: clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  --title-sm: clamp(1.4rem, 1.2rem + .9vw, 1.9rem);
  --title-md: clamp(1.8rem, 1.3rem + 2.2vw, 3rem);
  --title-lg: clamp(2.1rem, 1.4rem + 3.2vw, 3.8rem);
  --title-xl: clamp(2.4rem, 1.4rem + 4.4vw, 4.6rem);

  /* Layout */
  --container: 1280px;
  --space-section: clamp(3.5rem, 8vw, 7rem);
  --header-h: 76px;
  --tilt: 2deg;              /* the two sticker angles; nothing is pasted at any other angle */
  --tilt-back: -3deg;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
}