/* ==========================================================================
   First Choice Logistics — Design tokens
   Palette sampled from the official logo package (00_READ_ME/COLOR_PALETTE.txt)

   Six of these colours are overridden at runtime by an inline <style> block
   in includes/header.php, fed from web_settings — so the client can rebrand
   from the admin panel with no redeploy. Values here are the fallbacks.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --navy:        #042356;
  --navy-700:    #0A3A80;
  --navy-500:    #1A5CB0;
  --navy-900:    #021634;
  --gold:        #C59733;
  --gold-400:    #DDB45A;
  --gold-300:    #EBD08F;
  --gold-600:    #9E7724;
  --charcoal:    #181C22;
  --white:       #FFFFFF;

  /* --- Surfaces & ink --------------------------------------------------- */
  --surface:       #FFFFFF;
  /* Deepened from #F5F7FA. The old value sat at 1.07:1 against white — at or
     below the threshold where a step is perceptible at all, so the page's five
     alternating sections all read as one white block. This is ~1.18:1: still
     quiet, but actually visible as a change of surface. */
  --surface-alt:   #E7EEF7;
  --surface-sunken:#EEF2F7;
  --ink:           #181C22;
  --ink-muted:     #5A6472;
  --ink-faint:     #8A94A3;
  --border:        #E2E8F0;
  --border-strong: #CBD5E1;

  /* --- Semantic --------------------------------------------------------- */
  --success: #1E8E5A;
  --success-bg: #E6F4EE;
  --warning: #C58A15;
  --warning-bg: #FDF4E3;
  --danger:  #C0392B;
  --danger-bg: #FBEAE8;
  --info:    #1A5CB0;
  --info-bg: #E8F0FA;

  /* --- Typography ------------------------------------------------------- */
  --font-display: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-black:  800;

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

  /* --- Layout ----------------------------------------------------------- */
  --maxw:        1200px;
  --maxw-narrow:  820px;
  --maxw-wide:   1440px;
  --nav-h:         76px;
  --nav-h-mobile:  64px;

  /* --- Radii & shadows -------------------------------------------------- */
  --radius-xs:  6px;
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(4, 35, 86, .06);
  --shadow:    0 12px 32px rgba(4, 35, 86, .10);
  --shadow-lg: 0 24px 64px rgba(4, 35, 86, .16);
  --shadow-gold: 0 8px 24px rgba(197, 151, 51, .28);

  /* --- Glassmorphism ---------------------------------------------------- */
  /* Allowed on: sticky nav, cards, modals, tooltips.
     BANNED on:  hero backgrounds, full-page overlays, body-text containers.
     Reason: heavy backdrop-filter behind a full-viewport element costs
     15-30% FPS on mid-tier Android. */
  --glass-bg:      rgba(255, 255, 255, .70);
  --glass-brd:     rgba(255, 255, 255, .55);
  --glass-blur:    10px;
  --glass-dark-bg: rgba(4, 35, 86, .55);
  --glass-dark-brd:rgba(255, 255, 255, .14);

  /* --- Gradients -------------------------------------------------------- */
  --grad-navy: linear-gradient(150deg, var(--navy-700) 0%, var(--navy) 55%, var(--navy-900) 100%);
  --grad-gold: linear-gradient(135deg, var(--gold-400) 0%, var(--gold) 60%, var(--gold-600) 100%);

  /* --- Motion ----------------------------------------------------------- */
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 160ms;
  --dur:      280ms;
  --dur-slow: 480ms;

  --z-nav: 100;
  --z-dropdown: 200;
  --z-modal: 400;
  --z-toast: 500;
}

/* ==========================================================================
   Breakpoints — exactly five, mobile-first, min-width only.
   480  small phone -> large phone
   768  tablet
   1024 small laptop  (primary desktop-nav switch)
   1280 desktop
   1536 wide desktop
   Fluid clamp() typography does most of the work; breakpoints only handle
   layout switches. Do NOT add ad-hoc values outside this scale.
   ========================================================================== */