/* ==========================================================================
   Drop-Off Couriers — Design Tokens
   All color references across the site resolve to these variables.
   No hardcoded hex values should appear outside this file.
   ========================================================================== */

:root {
  /* Brand anchors */
  --brand: #273884;
  --brand-dark: #0D1A4A;

  /* Surfaces (dark mode = default) */
  --bg-primary: #0D1A4A;
  --bg-secondary: #1A2560;
  --card-bg: #1A2560;

  /* Text */
  --text-primary: #E8EEFF;
  --text-secondary: #8ED5E1;
  --text-muted: rgba(232, 238, 255, 0.55);

  /* Accents */
  --accent-cyan: #8ED5E1;
  --accent-yellow: #F6EC14;

  /* Borders & lines */
  --border: rgba(142, 213, 225, 0.12);
  --grid-line: rgba(39, 56, 132, 0.55);

  /* Text on always-dark brand surfaces (constant across light + dark) */
  --on-brand: #EAF1FF;
  --on-brand-soft: rgba(234, 241, 255, 0.66);
  --on-brand-cyan: #8ED5E1;
  --on-brand-border: rgba(142, 213, 225, 0.16);

  /* Hero gradient text + ambient glows */
  --grad-1: #8ED5E1;
  --grad-2: #EAF6FF;
  --glow-1: rgba(142, 213, 225, 0.18);
  --glow-2: rgba(246, 236, 20, 0.10);
  --fade-bg: var(--bg-secondary);

  /* Buttons */
  --btn-primary-bg: #F6EC14;
  --btn-primary-text: #0D1A4A;
  --btn-secondary-bg: transparent;
  --btn-secondary-border: #8ED5E1;
  --btn-secondary-text: #8ED5E1;

  /* Nav (glass) */
  --nav-bg: rgba(39, 56, 132, 0.65);
  --nav-bg-scrolled: rgba(39, 56, 132, 0.78);
  --nav-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  --nav-border: rgba(255, 255, 255, 0.08);

  /* Elevation */
  --shadow-card: 0 18px 40px -24px rgba(0, 0, 0, 0.65);
  --shadow-card-hover: 0 28px 60px -28px rgba(0, 0, 0, 0.75);

  /* Typography — Alezon uses Inter Tight for everything */
  --font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter Tight", var(--font-body);

  /* Layout — Alezon radius scale (rounded) + large section rhythm */
  --container: 1240px;
  --container-wide: 1340px;
  --radius-sm: 0.75rem;    /* 12px */
  --radius-md: 1rem;       /* 16px */
  --radius-lg: 1.875rem;   /* 30px */
  --radius-pill: 999px;
  --section-gap: clamp(4.375rem, 9vw, 8.125rem); /* 70px → 130px */

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.28s;
}

[data-theme="light"] {
  --bg-primary: #F4F6FF;
  --bg-secondary: #FFFFFF;
  --card-bg: #FFFFFF;

  --text-primary: #1A2050;
  --text-secondary: #273884;
  --text-muted: rgba(26, 32, 80, 0.55);

  --accent-cyan: #273884;
  --accent-yellow: #F6EC14;

  --border: rgba(39, 56, 132, 0.10);
  --grid-line: rgba(39, 56, 132, 0.10);

  --btn-primary-bg: #F6EC14;
  --btn-primary-text: #1A2050;
  --btn-secondary-bg: transparent;
  --btn-secondary-border: #273884;
  --btn-secondary-text: #273884;

  --nav-bg: rgba(255, 255, 255, 0.62);
  --nav-bg-scrolled: rgba(255, 255, 255, 0.78);
  --nav-shadow: 0 6px 24px rgba(39, 56, 132, 0.12);
  --nav-border: rgba(39, 56, 132, 0.08);

  --shadow-card: 0 18px 40px -28px rgba(39, 56, 132, 0.28);
  --shadow-card-hover: 0 26px 56px -30px rgba(39, 56, 132, 0.34);

  --grad-1: #273884;
  --grad-2: #6B7FD0;
  --glow-1: rgba(39, 56, 132, 0.10);
  --glow-2: rgba(142, 213, 225, 0.22);
  --fade-bg: var(--bg-secondary);
}