/**
 * SIOR Brand Tokens — Single Source of Truth (CSS)
 *
 * Locked to the SIOR Brand Guidelines:
 *   docs/SIOR Branding/sior-brand-guidelines-final-for-members-and-chapters.pdf
 *
 * These six tokens are the ONLY SIOR brand colours. Do not edit the hex values
 * — if you need a shade variant, add a derived token below (e.g. --sior-navy-90)
 * rather than mutating the source palette. The JS mirror lives at
 * `src/js/lib/brand.js`. Both files must stay in sync; `tests/brand-tokens.spec.js`
 * enforces that.
 *
 * Loaded from `src/index.html` BEFORE `styles.css` so subsequent rules can
 * `var(--sior-*)` these tokens.
 */

:root {
  /* Locked SIOR palette (do not edit) */
  --sior-navy:   #1A2429; /* Primary dark; on-color backgrounds; body text on light */
  --sior-cyan:   #00A9E6; /* Primary accent; active states; primary CTAs */
  --sior-sky:    #32B8DF; /* Secondary accent; hover states; light highlights */
  --sior-orange: #F26729; /* Alert / urgent (exclusively) */
  --sior-blue:   #0070B9; /* Link colour; secondary CTA */
  --sior-gray:   #808285; /* Neutral text; borders; disabled states */

  /*
   * Derived tokens. Add a derived token here ONLY when it has at least one
   * consumer in src/. Premature abstraction was removed in BRAND-1 review-loop;
   * tests/brand-tokens.spec.js asserts the locked source palette stays in
   * sync with src/js/lib/brand.js.
   */

  /* Hover variant of --sior-navy (BRAND-2): ~10% lighter for table-header
   * hover affordance. Single consumer: `.analytics-table th:hover` in
   * styles.css. Hex literal — derived shade, not a brand-locked colour. */
  --sior-navy-hover: #2a3942;

  /* ──────────────────────────────────────────────────────────────────────
   * Type — sober broker-grade scale (BRAND-3)
   *
   * Tight, broker-grade typographic scale derived from the SIOR brand PDF
   * (geometric sans for headlines + open body face). The SIOR guidelines
   * don't mandate a typeface beyond logo trademark constraints, so we lock
   * Montserrat (display) + Open Sans (body) here and expose the scale as
   * tokens so future consumers reference these instead of literal sizes.
   *
   * NOTE: --font-display / --font-body are the canonical declarations and
   * live ONLY here (the duplicate :root declarations in styles.css were
   * removed in BRAND-3 follow-up to eliminate cascade duplication, mirroring
   * the BRAND-1 --sior-navy fix). The fallback chains below merge the richer
   * Helvetica Neue / Segoe UI fallbacks that previously lived in styles.css.
   *
   * Future: migrate font-size: 12px/14px/16px/20px/24px/32px literals in
   * styles.css to var(--font-size-*) when refactoring those rules. Light
   * sweep deferred from BRAND-3 (2026-04-30) to keep the change focused.
   * ────────────────────────────────────────────────────────────────────── */
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-body: 'Open Sans', 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-size-h1: 2rem;       /* 32px */
  --font-size-h2: 1.5rem;     /* 24px */
  --font-size-h3: 1.25rem;    /* 20px */
  --font-size-body: 1rem;     /* 16px */
  --font-size-small: 0.875rem;/* 14px */
  --font-size-caption: 0.75rem; /* 12px */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --line-height-tight: 1.2;
  --line-height-body: 1.5;

  /* ──────────────────────────────────────────────────────────────────────
   * Locked breakpoints (MOBILE-1)
   *
   * These are the canonical breakpoint widths. CSS @media rules use the
   * literal pixel values (CSS custom properties cannot be used inside
   * @media expressions), but new code MUST match these tokens so a future
   * pre-commit check can audit drift. JS that reads breakpoints can use
   * `getComputedStyle(document.documentElement).getPropertyValue('--bp-...')`.
   *
   * Ranges:
   *   ≤480px        → small phone
   *   481–768px     → large phone / tablet portrait
   *   769–1024px    → tablet landscape / small laptop
   *   >1024px       → desktop
   *
   * Touch-target rule (locked, Apple HIG): every interactive element must
   * be ≥44×44 CSS pixels at every breakpoint.
   * ────────────────────────────────────────────────────────────────────── */
  --bp-phone: 480px;
  --bp-phone-large: 768px;
  --bp-tablet: 1024px;
  --touch-target-min: 44px;
}