/*
 * Next League Marketing — brand tokens.
 *
 * SINGLE SOURCE OF TRUTH for every brand color, 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 color.
 */

: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);

  /*
   * 28 Sep 2026 (Andy): four values the site already used without a token,
   * tokenised so the look stays exactly as it was. No other values added.
   */
  --color-text-body: #cbd5e1;              /* body copy (was Tailwind slate-300) */
  --color-surface-alt: #0e1014;            /* alternate section background */
  --color-border-subtle: rgba(255, 255, 255, 0.15);
  --color-border-strong: rgba(255, 255, 255, 0.20);

  /* 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;
}