/* ==========================================================================
   DESIGN TOKENS: Melton Maxi Taxi
   Single source of truth for colour, type, spacing, motion.
   Colours are sampled from the supplied logo:
     logo navy  ≈ #041C3C  → --color-primary  (#051F3E, design-approved)
     logo red   ≈ #C80000  → --color-accent   (#C90202, design-approved)
   WordPress: map these to theme.json settings.color.palette / custom properties.
   ========================================================================== */
:root {
  /* Brand */
  --color-primary: #051F3E;
  --color-primary-2: #0B2E5A;          /* lifted navy for panels on navy */
  --color-accent: #C90202;
  --color-accent-dark: #A60000;        /* hover / pressed */
  --color-accent-light: #FF6B64;       /* accent on dark backgrounds */
  --color-accent-soft: #FF8A84;
  --color-accent-pale: #FFB4AF;

  /* Surfaces */
  --white: #fff;
  --color-bg: #F6F4F0;                 /* page background */
  --color-surface: #fff;
  --color-surface-2: #E9EEF5;          /* cool grey-blue panels */
  --color-dots: #C9D3E3;

  /* Text */
  --color-text: var(--color-primary);
  --color-text-2: #2B3D57;
  --color-text-muted: #4A5B73;
  --color-placeholder: #5F6F87;
  --color-on-dark: #fff;
  --color-on-dark-muted: #C9D6EA;
  --color-on-dark-faint: #B7C4D8;
  --color-nav-text: #DCE5F2;

  /* Lines */
  --color-border: #D2DBE8;
  --color-border-soft: #E3E8F0;

  /* Interactive roles */
  --color-interactive: var(--color-primary);
  --color-focus: var(--color-accent-light);
  --color-focus-light-bg: var(--color-accent);
  --color-selection-bg: var(--color-accent);
  --color-selection-text: #fff;
  --color-whatsapp: #1FA855;           /* official WhatsApp green family */

  /* Typography */
  --font-heading: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Layout */
  --container-width: 1296px;
  --gutter: clamp(20px, 4vw, 56px);
  --section-spacing: clamp(72px, 9vw, 128px);
  --header-h: 88px;
  --header-h-scrolled: 76px;

  /* Shape */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-card: 0 30px 50px -24px rgba(5, 31, 62, .45);
  --shadow-pop: 0 24px 40px -18px rgba(5, 31, 62, .5);
  --shadow-red: 0 14px 28px -10px rgba(201, 2, 2, .7);

  /* Motion (CSS side; JS reads the same values from assets/js/config.js) */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --transition-fast: 220ms var(--ease-out);
  --transition-normal: 400ms var(--ease-out);

  /* Stacking */
  --z-header: 60;
  --z-fab: 80;
  --z-skip: 100;
}