/* =============================================================================
   Bay Area Support — CANONICAL BRAND TOKENS  (single source of truth)
   -----------------------------------------------------------------------------
   Loaded on BOTH rendering systems:
     • Marketing (hand-authored PHP) — linked in site/partials/head.php
     • Portal    (WP block theme + plugin) — enqueued before nav-auth.css
   Every front-end stylesheet references these via var(--bas-*, <hex fallback>).
   DO NOT hardcode brand hexes in new CSS — use a token below. Add new shared
   colors here, never in a single consumer stylesheet.
   Values verified against the styling guidelines (see design reference).
   ============================================================================= */
:root {
  /* Brand core */
  --bas-pacific:      #0e3d4f;   /* the one structural dark: header/footer/CTA bands, card heads */
  --bas-pacific-night:#081f29;   /* deepest pacific — silhouettes, cable-car detail */
  --bas-orange:       #ff4532;   /* International Orange — buttons, accent borders (FILLS/decor only) */
  --bas-orange-dark:  #e63321;   /* primary-button hover/active */
  --bas-orange-text:  #c9351f;   /* orange for TEXT/LINKS — WCAG AA (5.2:1 on white/cream). Use this, not --bas-orange, on any orange text. */
  --bas-orange-btn:       #cc3624;   /* primary/action BUTTON fill — white text passes AA (5.1:1). Accents/borders/icons keep --bas-orange. */
  --bas-orange-btn-hover: #b02f1e;   /* button hover */
  --bas-yellow:       #fff2a7;   /* pale highlight, used sparingly */
  --bas-teal:         #6bbfdb;   /* bay sky — secondary highlight (hero, shimmer, accents) */

  /* Text */
  --bas-ink-black:    #132025;   /* all headings + darkest text */
  --bas-ink-strong:   #3c434a;   /* emphasised body */
  --bas-ink:          #55606a;   /* default body copy */
  --bas-muted:        #6b7280;   /* secondary / captions — WCAG AA (4.8:1 on white). Was #8a8f98 (3.25:1, failed). */

  /* Surfaces & borders */
  --bas-cream:        #fffdf4;   /* the one page background */
  --bas-cream-2:      #fbf8f0;   /* secondary cream */
  --bas-tint:         #fffdf4;   /* "well" fills (dashboard cards, estimate box, notices) — now = cream */
  --bas-white:        #ffffff;   /* cards / content surfaces */
  --bas-border:       #e7e4d8;   /* the one warm hairline border (decorative — pair with shadow/fill) */
  --bas-border-cool:  #828a93;   /* cool hairline (inputs, modal fields) — WCAG AA 3:1 non-text edge (3.4:1 on white/cream). Was #d9dce2 (1.37:1, failed). */
  --bas-divider-dark: #1c5266;   /* hairline divider on Pacific */

  /* Status. NOTE: --bas-success / --bas-danger are FILL colors (white text on them).
     For colored TEXT/LINKS use the *-text tokens (dark themes lighten them so they
     stay legible on navy — see nav-auth.css / site.css dark blocks). */
  --bas-success:      #047857;   /* success FILL — WCAG AA (5.5:1 with white text). Was #059669 (3.77:1, failed). */
  --bas-success-text: #047857;   /* success TEXT on light (5.5:1); lightened in dark mode */
  --bas-danger:       #b32d2e;   /* danger FILL (white text 6.3:1) */
  --bas-danger-text:  #b32d2e;   /* danger TEXT on light (6.3:1); lightened in dark mode */
  --bas-amber-bg:     #fef3cd;   /* attention notice background */
  --bas-amber-text:   #664d03;   /* attention notice text */

  /* Type */
  --bas-font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bas-font-body:    "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout rhythm */
  --bas-maxw:         1140px;    /* content max-width (marketing + portal) */
  --bas-gutter:       1.5rem;    /* horizontal page padding — header, content, footer all match */
  --bas-radius-card:  16px;
  --bas-radius-btn:   8px;
  --bas-shadow-card:  0 4px 16px rgba(17, 24, 39, 0.10);
}