/* ==========================================================================
   ACPL Design System — Tokens
   Single source of truth for colour, type, spacing, radii, elevation and
   motion. Shared by the corporate site, Purchase and Subscription portals.
   Brand source: ACPL logo — ink black "Access" over sky blue #2AA2E2.
   Breakpoints (media queries cannot read custom properties):
     sm 480px · md 768px · lg 1024px · xl 1280px · 2xl 1440px
   ========================================================================== */

:root {
  /* ---- Palette: brand blue (hue from logo #2AA2E2) ---------------------- */
  --blue-50: #eef7fd;
  --blue-100: #d8edfa;
  --blue-200: #b0daf4;
  --blue-300: #7cc2ec;
  --blue-400: #4bafe6;
  --blue-500: #2aa2e2; /* logo blue */
  --blue-600: #0e85c9;
  --blue-700: #0b6bb0; /* AA on white — primary actions */
  --blue-800: #0c5690;
  --blue-900: #0d4570;

  /* ---- Palette: navy (enterprise surfaces) ------------------------------ */
  --navy-950: #061426;
  --navy-900: #081c33;
  --navy-800: #0b2644;
  --navy-700: #123359;
  --navy-600: #1c4470;

  /* ---- Palette: neutrals (slate, slightly blue-biased) ------------------ */
  --gray-0: #ffffff;
  --gray-25: #fbfcfe;
  --gray-50: #f5f8fb;
  --gray-100: #edf2f7;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #667085;
  --gray-600: #475467;
  --gray-700: #344054;
  --gray-800: #1d2939;
  --gray-900: #0f1b2a;

  /* ---- Semantic: brand -------------------------------------------------- */
  --brand-primary: var(--blue-700);
  --brand-primary-hover: var(--blue-800);
  --brand-primary-soft: var(--blue-50);
  --brand-secondary: var(--navy-800);
  --brand-secondary-hover: var(--navy-700);
  --brand-accent: var(--blue-500);
  --brand-ink: #0a0a0a; /* logo black */

  /* ---- Semantic: surfaces ---------------------------------------------- */
  --surface-primary: var(--gray-0);
  --surface-secondary: var(--gray-50);
  --surface-tertiary: var(--gray-100);
  --surface-tint: var(--blue-50);
  --surface-dark: var(--navy-900);
  --surface-dark-raised: var(--navy-800);
  --surface-overlay: rgb(6 20 38 / 0.56);

  /* ---- Semantic: text --------------------------------------------------- */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --text-inverse: #ffffff;
  --text-inverse-muted: rgb(255 255 255 / 0.72);
  --text-link: var(--blue-700);
  --text-link-hover: var(--blue-900);

  /* ---- Semantic: borders ----------------------------------------------- */
  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--gray-400);
  --border-inverse: rgb(255 255 255 / 0.14);
  --border-focus: var(--blue-600);

  /* ---- Semantic: status ------------------------------------------------ */
  --success: #067647;
  --success-soft: #ecfdf3;
  --success-border: #abefc6;
  --warning: #b54708;
  --warning-soft: #fffaeb;
  --warning-border: #fedf89;
  --error: #b42318;
  --error-soft: #fef3f2;
  --error-border: #fecdca;
  --success-text: #054f31;
  --warning-text: #7a2e0e;
  --error-text: #7a271a;
  --error-hover: #912018;
  --info: var(--blue-700);
  --info-soft: var(--blue-50);
  --info-border: var(--blue-200);

  /* ---- Typography ------------------------------------------------------ */
  --font-display: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;

  --fs-display: clamp(2.25rem, 1.55rem + 2.6vw, 3.5rem);
  --fs-h1: clamp(2rem, 1.5rem + 1.9vw, 2.875rem);
  --fs-h2: clamp(1.625rem, 1.3rem + 1.25vw, 2.25rem);
  --fs-h3: clamp(1.1875rem, 1.08rem + 0.45vw, 1.4375rem);
  --fs-h4: 1.0625rem;
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.8125rem;
  --fs-overline: 0.75rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  --tracking-tight: -0.022em;
  --tracking-snug: -0.012em;
  --tracking-overline: 0.12em;

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --section-y: clamp(3.5rem, 2.4rem + 4.2vw, 6.5rem);
  --section-y-sm: clamp(2.5rem, 2rem + 2.4vw, 4rem);

  /* ---- Layout ---------------------------------------------------------- */
  --container-max: 1240px;
  --container-wide: 1360px;
  --container-narrow: 840px;
  --gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem);
  --header-h: 72px;
  --utility-h: 36px;

  /* ---- Radii ----------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ---- Elevation (navy-tinted) ----------------------------------------- */
  --shadow-xs: 0 1px 2px rgb(8 28 51 / 0.06);
  --shadow-sm: 0 1px 3px rgb(8 28 51 / 0.08), 0 1px 2px rgb(8 28 51 / 0.04);
  --shadow-md: 0 6px 16px -4px rgb(8 28 51 / 0.1), 0 2px 6px -2px rgb(8 28 51 / 0.06);
  --shadow-lg: 0 18px 40px -12px rgb(8 28 51 / 0.18), 0 6px 14px -6px rgb(8 28 51 / 0.08);
  --shadow-xl: 0 32px 64px -20px rgb(8 28 51 / 0.28);
  --ring-focus: 0 0 0 3px rgb(42 162 226 / 0.4);

  /* ---- Controls -------------------------------------------------------- */
  --control-h-sm: 36px;
  --control-h-md: 44px;
  --control-h-lg: 52px;
  --touch-min: 44px;

  /* ---- Motion ---------------------------------------------------------- */
  --dur-instant: 100ms;
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 420ms;
  --dur-reveal: 640ms;
  --dur-ambient: 24s;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --reveal-distance: 18px;
  --stagger: 70ms;

  /* ---- Layers ---------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 50;
  --z-header: 100;
  --z-dropdown: 110;
  --z-overlay: 200;
  --z-drawer: 210;
  --z-dialog: 300;
  --z-toast: 400;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
    --reveal-distance: 0px;
    --stagger: 0ms;
  }
}