/**
 * Spots Design System — BLUE + RED variant
 * css/variables-blue-red.css
 *
 * Design tokens for the shipper app. Ported from the spots2 handoff
 * (spots2/css/design_handoff_blue_red/css/blue-red-tokens.css) and adapted
 * for this app's Bootstrap 4.0.0 base.
 *
 * Palette sampled directly from the Spots logo (img/spots_logo.png):
 *   Blue  #21409A  (dominant)
 *   Red   #BE1E2D  (accent)
 *   White #FFFFFF  (the negative planes of the box mark)
 *
 * Load order (see header.php):
 *   1. css/bootstrap.min.css
 *   2. css/variables-blue-red.css   <- this file
 *   3. css/stylesheet.css           (the override layer, consumes these tokens)
 *
 * This file declares tokens only. It must not contain component rules —
 * put those in stylesheet.css so there is a single override layer.
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {

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

	/* ─── Blue family ────────────────────────────────────────────────── */
	--blue-ink:  #0B1533;   /* Near-black navy — deepest surface, footers, body text */
	--blue-deep: #152A66;   /* Secondary dark surface, pressed state */
	--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 */

	/* ─── Semantic aliases ───────────────────────────────────────────── */
	--color-bg:            var(--paper-white);
	--color-bg-alt:        var(--surface-alt);
	--color-bg-wash:       var(--blue-50);
	--color-bg-brand:      var(--spots-blue);
	--color-bg-deep:       var(--blue-deep);
	--color-bg-ink:        var(--blue-ink);
	--color-surface:       var(--paper-white);
	--color-border:        var(--border);
	--color-border-subtle: rgba(33, 64, 154, 0.10);

	--color-fg1:        var(--blue-ink);     /* primary text */
	--color-fg2:        var(--slate);        /* secondary text */
	--color-fg3:        var(--fog);          /* tertiary / disabled */
	--color-fg-brand:   var(--spots-blue);   /* headlines, brand type */
	--color-fg-inverse: var(--paper-white);

	--color-primary:        var(--spots-red);
	--color-primary-hover:  var(--red-500);
	--color-primary-active: var(--red-700);

	--color-secondary:       var(--spots-blue);
	--color-secondary-hover: var(--blue-500);

	--color-success: var(--on-time-green);
	--color-warning: var(--alert-amber);
	--color-danger:  var(--urgent-red);
	--color-info:    var(--cold-ice);

	/* ─── Service colour associations ────────────────────────────────── */
	/* LTL (hero product) → Spots Blue, the brand colour undiluted        */
	/* Courier            → Spots Red, fast and energetic                 */
	/* Cold Chain         → Cold Ice on blue-ink backgrounds              */
	/* Cross-border SG    → Red on Blue Deep, more serious                */
	/* FTL                → Blue Ink, minimal red — industrial            */
	--service-ltl:     var(--spots-blue);
	--service-courier: var(--spots-red);
	--service-cold:    var(--cold-ice);
	--service-sg:      var(--blue-deep);
	--service-ftl:     var(--blue-ink);

	/* ─── Typography ─────────────────────────────────────────────────── */
	/* To revert to the legacy pairing, change these two lines only:
	   --font-heading: 'Montserrat', sans-serif;
	   --font-body: 'Source Sans Pro', sans-serif;                        */
	--font-heading: 'Space Grotesk', sans-serif;
	--font-body:    'Inter', system-ui, -apple-system, sans-serif;
	--font-mono:    'SFMono-Regular', Menlo, Monaco, Consolas, monospace;

	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	--text-xs: 0.6875rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.75rem;
	--text-4xl: 2.25rem;
	--text-5xl: 3rem;

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

	/* ─── 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 logo is built from hard-edged isometric planes — keep corners tight */
	--radius-sm: 3px;
	--radius-md: 4px;
	--radius-lg: 6px;
	--radius-xl: 10px;
	--radius-full: 9999px;

	/* ─── 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 ────────────────────────────────────────────────── */
	--transition-fast: 0.15s ease;
	--transition-base: 0.3s ease;
	--transition-slow: 0.5s ease;
}