/**
* File: variables-s.css
* Spots — BLUE + RED brand theme
*
* Single source of truth for the marketing site's colour and type. Replaces
* variables-blue.css in header.php. Palette sampled from img/spots_logo.png:
* blue #21409A, red #BE1E2D, white.
*
* Structure:
*   1. Brand tokens          — the design system, verbatim from the handoff
*   2. HeroBiz bridge        — maps --color-* / --font-* onto the brand tokens
*   3. Bootstrap 5.3 bridge  — maps --bs-* onto the brand tokens
*   4. Colour utility classes
*
* Layer 2 is what does the work: main.css is ~340 var() references and only 4
* hardcoded hex values, so repointing these names rethemes the whole template.
*
* IMPORTANT — the button inversion. HeroBiz's --color-primary is its *accent*
* (80 uses: icons, links, nav underlines, active tabs). The brand says red is a
* <=10% accent, max one per view, so --color-primary is mapped to BLUE and red
* lives in a separate --color-cta token consumed by ~7 named selectors in
* main.css. Never repoint --color-primary at red.
*
* Reference spec: css/design_handoff_blue_red/README.md
* Implementation notes: css/design_handoff_blue_red/IMPLEMENTATION_PLAN.md
*/

/*--------------------------------------------------------------
# 1. Brand tokens
--------------------------------------------------------------*/
:root {

  /* Primary palette (70 / 20 / 10) */
  --spots-blue:  #21409A;   /* Hero surfaces, headlines, primary brand */
  --spots-red:   #BE1E2D;   /* Single accent, CTAs, the 'pop' */
  --paper-white: #FAF7F2;   /* The canvas */

  /* Blue family */
  --blue-ink:  #0B1533;   /* Deepest surface, footers, body text */
  --blue-deep: #152A66;   /* Secondary dark surface */
  --blue-600:  #21409A;   /* Base — the logo blue */
  --blue-500:  #3355B5;   /* Hover, lighter fill */
  --blue-400:  #4A66C0;   /* Interactive light */
  --blue-200:  #A8B6E0;   /* Muted fills, disabled brand elements */
  --blue-50:   #EEF1FA;   /* Pale blue wash — alternate surface */

  /* Red family */
  --red-700: #9A1523;   /* Pressed / active */
  --red-600: #BE1E2D;   /* Base — the logo red */
  --red-500: #D93A48;   /* Hover */
  --red-50:  #FDEEF0;   /* Alert background wash */

  /* Cool neutrals — blue-tinted, never warm. Cream fights navy. */
  --surface-alt: #F5F7FC;   /* Cool off-white, default section alternate */
  --border:      #DDE2EC;   /* Dividers, card borders */
  --slate:       #5A6480;   /* Secondary text, metadata, captions */
  --fog:         #8E97AE;   /* Tertiary text, disabled, fine print */

  /* Functional accents */
  --on-time-green: #0E9F6E;   /* Success, on-time badges, positive metrics */
  --alert-amber:   #E08A00;   /* Warnings, limited-time badges */
  --cold-ice:      #0EA5C9;   /* Cold chain ONLY */
  --urgent-red:    #BE1E2D;   /* Errors — always on a --red-50 wash */

  /* Typography */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --ls-display: -0.02em;
  --ls-label:   0.12em;
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;

  /* Spacing */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* Radius — the mark is hard-edged isometric planes, keep corners tight */
  --radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 10px;

  /* Shadows — UI only, never in marketing creative */
  --shadow-sm: 0 1px 3px rgba(11, 21, 51, 0.08), 0 1px 2px rgba(11, 21, 51, 0.04);
  --shadow-md: 0 4px 12px rgba(11, 21, 51, 0.10), 0 2px 4px rgba(11, 21, 51, 0.06);
  --shadow-lg: 0 10px 30px rgba(11, 21, 51, 0.12), 0 4px 8px rgba(11, 21, 51, 0.06);

  /* Transitions — no bounce, no spring */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/*--------------------------------------------------------------
# 2. HeroBiz bridge
--------------------------------------------------------------*/
:root {

  /* Fonts — two families only, never a third */
  --font-default: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-primary: 'Space Grotesk', sans-serif;   /* headings */
  --font-secondary: 'Inter', sans-serif;         /* buttons, nav, UI */

  /* Body text */
  --color-default: #0B1533;
  --color-default-rgb: 11, 21, 51;

  /* Links are red per the brand */
  --color-links: #BE1E2D;
  --color-links-hover: #D93A48;

  /* Primary = SPOTS BLUE. This is the template's accent token (80 uses:
     icons, nav underlines, active tabs, footer rules). It must stay blue —
     red here would flood the site and break the 10% rule. */
  --color-primary: #21409A;
  --color-primary-light: #3355B5;
  --color-primary-dark: #152A66;

  --color-primary-rgb: 33, 64, 154;
  --color-primary-light-rgb: 51, 85, 181;
  --color-primary-dark-rgb: 21, 42, 102;

  /* Secondary carries headline type in 17 selectors and dark surfaces in 6.
     Headlines win (they are the loudest brand signal); the 6 surface uses are
     overridden to --color-ink in main.css. */
  --color-secondary: #21409A;
  --color-secondary-light: #5A6480;
  --color-secondary-dark: #0B1533;

  /* Deliberately decoupled from --color-secondary above. Every one of this
     token's 30 uses is an rgba() wash, shadow, border or overlay — never
     adjacent to the solid colour — so pointing it at ink lands all shadows on
     the spec'd rgba(11,21,51,...) without editing a single declaration. */
  --color-secondary-rgb: 11, 21, 51;
  --color-secondary-light-rgb: 90, 100, 128;
  --color-secondary-dark-rgb: 11, 21, 51;

  /* CTA — no HeroBiz equivalent. This is the button inversion: red is the
     primary call to action, blue is secondary. Consumed only by the named
     CTA selectors in main.css and by .btn-spots-cta. One per view. */
  --color-cta: #BE1E2D;
  --color-cta-hover: #D93A48;
  --color-cta-active: #9A1523;
  --color-cta-rgb: 190, 30, 45;

  /* Surfaces */
  --color-ink: #0B1533;
  --color-ink-rgb: 11, 21, 51;
  --color-deep: #152A66;
  --color-wash: #EEF1FA;
  --color-surface-alt: #F5F7FC;
  --color-border: #DDE2EC;
  --color-fog: #8E97AE;

  /* General colours — repointed onto the brand's functional accents */
  --color-blue: #21409A;
  --color-blue-rgb: 33, 64, 154;

  --color-indigo: #4A66C0;
  --color-indigo-rgb: 74, 102, 192;

  --color-purple: #4A66C0;
  --color-purple-rgb: 74, 102, 192;

  --color-pink: #D93A48;
  --color-pink-rgb: 217, 58, 72;

  --color-red: #BE1E2D;
  --color-red-rgb: 190, 30, 45;

  --color-orange: #E08A00;
  --color-orange-rgb: 224, 138, 0;

  --color-yellow: #E08A00;
  --color-yellow-rgb: 224, 138, 0;

  --color-green: #0E9F6E;
  --color-green-rgb: 14, 159, 110;

  --color-teal: #0E9F6E;
  --color-teal-rgb: 14, 159, 110;

  --color-cyan: #0EA5C9;
  --color-cyan-rgb: 14, 165, 201;

  --color-white: #FFFFFF;
  --color-white-rgb: 255, 255, 255;

  --color-gray: #5A6480;
  --color-gray-rgb: 90, 100, 128;

  --color-black: #000000;
  --color-black-rgb: 0, 0, 0;

}

/*--------------------------------------------------------------
# 3. Bootstrap 5.3 bridge
--------------------------------------------------------------*/
/* Covers the Bootstrap components the site actually uses: modals (footer.php),
   FAQ accordions, .form-control in the quote calculator, and the select2
   bootstrap-5 theme loaded in header.php. The --bs-gray-* scale is kept as-is
   because select2 depends on it. */
:root {

  --bs-blue: var(--color-blue);
  --bs-indigo: var(--color-indigo);
  --bs-purple: var(--color-purple);
  --bs-pink: var(--color-pink);
  --bs-red: var(--color-red);
  --bs-orange: var(--color-orange);
  --bs-yellow: var(--color-yellow);
  --bs-green: var(--color-green);
  --bs-teal: var(--color-teal);
  --bs-cyan: var(--color-cyan);
  --bs-white: var(--color-white);
  --bs-gray: var(--color-gray);
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;

  /* Bootstrap's naming is the opposite of the brand's: .btn-primary is the
     blue (secondary action), .btn-secondary is the red CTA. */
  --bs-primary: #21409A;
  --bs-primary-rgb: 33, 64, 154;
  --bs-secondary: #BE1E2D;
  --bs-secondary-rgb: 190, 30, 45;
  --bs-success: #0E9F6E;
  --bs-success-rgb: 14, 159, 110;
  --bs-info: #0EA5C9;
  --bs-info-rgb: 14, 165, 201;
  --bs-warning: #E08A00;
  --bs-warning-rgb: 224, 138, 0;
  --bs-danger: #BE1E2D;
  --bs-danger-rgb: 190, 30, 45;
  --bs-light: #F5F7FC;
  --bs-light-rgb: 245, 247, 252;
  --bs-dark: #0B1533;
  --bs-dark-rgb: 11, 21, 51;

  --bs-white-rgb: var(--color-white-rgb);
  --bs-black-rgb: var(--color-black-rgb);
  --bs-body-color-rgb: var(--color-default-rgb);
  --bs-body-bg-rgb: 255, 255, 255;

  --bs-font-sans-serif: var(--font-default);
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-body-font-family: var(--font-default);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: var(--color-default);
  --bs-body-bg: #FFFFFF;

  --bs-heading-color: #21409A;
  --bs-border-color: #DDE2EC;
  --bs-border-radius: 4px;
  --bs-border-radius-sm: 3px;
  --bs-border-radius-lg: 6px;
  --bs-border-radius-xl: 10px;

  --bs-link-color: #BE1E2D;
  --bs-link-color-rgb: 190, 30, 45;
  --bs-link-hover-color: #D93A48;
  --bs-link-hover-color-rgb: 217, 58, 72;

  /* Flat brand — no gradients anywhere */
  --bs-gradient: none;

}

/*--------------------------------------------------------------
# 4. Colour utility classes
   Kept only where markup actually uses them — see CLAUDE.md CSS
   audit notes. .color-secondary: carrier/privacy/shipper agreement
   pages. .bg-primary: cargoinsurance.php. .bg-white: homepage.php
   (orphan page, kept in case it's relinked).
--------------------------------------------------------------*/
.color-secondary { color: var(--color-secondary) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.bg-white { background-color: var(--color-white) !important; }