/* ============================================================
   APECXTV GLOBAL — DESIGN TOKENS (D-108)
   Single source of truth for all design decisions
   ============================================================ */

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

:root {
  /* ── BRAND COLOURS (D-003) ── */
  --colour-primary: #042B6B;
  --colour-deep-navy: #021A45;
  --colour-corporate-gold: #D4A017;
  --colour-premium-gold: #F2B632;
  --colour-ocean-green: #0B8A7D;
  --colour-white: #FFFFFF;
  --colour-light-silver: #E9EDF5;
  --colour-slate-grey: #5E6B84;
  --colour-error: #DC2626;
  --colour-success: #0B8A7D;

  /* ── SEMANTIC COLOURS ── */
  --colour-text-primary: #042B6B;
  --colour-text-secondary: #5E6B84;
  --colour-text-inverse: #FFFFFF;
  --colour-background-primary: #FFFFFF;
  --colour-background-secondary: #E9EDF5;
  --colour-background-inverse: #021A45;
  --colour-border: #E9EDF5;
  --colour-border-focus: #042B6B;

  /* ── TYPOGRAPHY ── */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ── TYPE SCALE ── */
  --text-h1-size: clamp(2rem, 4vw, 3rem);
  --text-h1-line: 1.1;
  --text-h1-spacing: -0.02em;
  --text-h2-size: clamp(1.75rem, 3vw, 2.25rem);
  --text-h2-line: 1.2;
  --text-h2-spacing: -0.01em;
  --text-h3-size: clamp(1.25rem, 2vw, 1.5rem);
  --text-h3-line: 1.3;
  --text-eyebrow-size: 0.875rem;
  --text-eyebrow-spacing: 0.05em;
  --text-body-size: 1rem;
  --text-body-line: 1.6;
  --text-body-large-size: 1.125rem;
  --text-caption-size: 0.875rem;
  --text-button-size: 0.875rem;
  --text-button-spacing: 0.02em;

  /* ── SPACING (8px base) ── */
  --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;
  --space-32: 128px;

  /* ── CONTAINERS ── */
  --container-max: 1280px;
  --container-narrow: 720px;
  --container-wide: 1440px;
  --grid-gutter: 24px;
  --grid-margin: 64px;

  /* ── BORDER RADIUS ── */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* ── SHADOWS ── */
  --shadow-header: 0 2px 8px rgba(2, 26, 69, 0.08);
  --shadow-card: 0 2px 8px rgba(2, 26, 69, 0.08);
  --shadow-card-hover: 0 8px 24px rgba(2, 26, 69, 0.12);
  --shadow-panel: -4px 0 24px rgba(2, 26, 69, 0.15);
  --shadow-dropdown: 0 4px 12px rgba(2, 26, 69, 0.12);
  --shadow-tooltip: 0 2px 8px rgba(2, 26, 69, 0.12);

  /* ── TRANSITIONS ── */
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-medium: 300ms;
  --duration-slow: 400ms;
  --duration-reveal: 600ms;
  --ease-default: ease-out;
  --ease-map: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-INDEX ── */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-panel: 450;
  --z-tooltip: 700;
}

/* ── ANIMATIONS ── */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slide-in-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes slide-out-right {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2); opacity: 0; }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}