/*
 * Next League Marketing — brand tokens.
 *
 * SINGLE SOURCE OF TRUTH for every brand colour, font stack and radius.
 * If a brand value needs changing, it changes here and nowhere else.
 *
 * Consumed by:
 *   - the React app          → linked from /index.html, read by src/index.css
 *   - the four trade pages   → linked from public/{hvac,plumbing,electrical,roofing}.html
 *
 * The trade pages are hand-written HTML with no build step behind them, so
 * every var() that reads a token below MUST carry a literal fallback —
 * var(--accent, #10b981), never bare var(--accent). If this file 404s or is
 * renamed, the pages still render in full brand colour.
 */

:root {
  /* Surfaces — canvas is the page, -2 is a panel/band, -3 is an inset card */
  --canvas: #0c0d10;
  --canvas-2: #14161b;
  --canvas-3: #1a1d24;

  /* Text */
  --ink: #f3f4f6;
  --ink-dim: #9ca3af;
  --ink-faint: #6b7280;
  --platinum: #eae4ea;

  /* Brand */
  --accent: #10b981;
  --accent-soft: #059669;
  --accent-bright: #34d399;
  --on-accent: #07100c;

  /* Hairlines */
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.22);

  /* Geometry — panels and cards take --radius, buttons take --radius-pill */
  --radius: 12px;
  --radius-pill: 9999px;

  /* Type */
  --font-headline: 'Playfair Display', Georgia, serif;
  --font-ui: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}