/* ==========================================================================
   Apollo Plus — Design Tokens
   CSS custom properties for the redesigned pages
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     Colors — Teal / Emerald accent, cool gray neutrals, dark navy
     ------------------------------------------------------------------ */
  --ap-teal-50:  #e6f9f6;
  --ap-teal-100: #b3ede5;
  --ap-teal-200: #80e1d4;
  --ap-teal-300: #4dd5c3;
  --ap-teal-400: #26ccb5;
  --ap-teal-500: #0abfaa;  /* Primary accent */
  --ap-teal-600: #08a593;
  --ap-teal-700: #067a6d;
  --ap-teal-800: #045047;
  --ap-teal-900: #022622;

  --ap-gray-50:  #f8f9fa;
  --ap-gray-100: #f1f3f5;
  --ap-gray-200: #e9ecef;
  --ap-gray-300: #dee2e6;
  --ap-gray-400: #adb5bd;
  --ap-gray-500: #6c757d;
  --ap-gray-600: #495057;
  --ap-gray-700: #343a40;
  --ap-gray-800: #212529;
  --ap-gray-900: #0d1117;

  --ap-navy-900: #0a1628;
  --ap-navy-800: #0f2137;
  --ap-navy-700: #152d4a;

  --ap-white:    #ffffff;
  --ap-black:    #000000;

  /* Semantic aliases */
  --ap-accent:        var(--ap-teal-500);
  --ap-accent-hover:  var(--ap-teal-600);
  --ap-accent-light:  var(--ap-teal-50);
  --ap-accent-subtle: var(--ap-teal-100);

  --ap-bg-primary:    var(--ap-white);
  --ap-bg-secondary:  var(--ap-gray-50);
  --ap-bg-tertiary:   var(--ap-gray-100);
  --ap-bg-dark:       var(--ap-navy-900);
  --ap-bg-dark-alt:   var(--ap-navy-800);

  --ap-text-primary:  var(--ap-gray-800);
  --ap-text-secondary:var(--ap-gray-600);
  --ap-text-muted:    var(--ap-gray-500);
  --ap-text-on-dark:  var(--ap-white);
  --ap-text-on-dark-muted: rgba(255,255,255,0.7);

  --ap-border:        var(--ap-gray-200);
  --ap-border-light:  var(--ap-gray-100);

  /* ------------------------------------------------------------------
     Typography
     ------------------------------------------------------------------ */
  --ap-font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --ap-font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Type scale — Major Third (1.250) */
  --ap-text-xs:   0.75rem;   /* 12px */
  --ap-text-sm:   0.875rem;  /* 14px */
  --ap-text-base: 1rem;      /* 16px */
  --ap-text-md:   1.125rem;  /* 18px */
  --ap-text-lg:   1.25rem;   /* 20px */
  --ap-text-xl:   1.5rem;    /* 24px */
  --ap-text-2xl:  1.875rem;  /* 30px */
  --ap-text-3xl:  2.25rem;   /* 36px */
  --ap-text-4xl:  3rem;      /* 48px */
  --ap-text-5xl:  3.75rem;   /* 60px */
  --ap-text-6xl:  6rem;      /* 96px */

  /* Line heights */
  --ap-leading-none:    1;
  --ap-leading-tight:   1.15;
  --ap-leading-snug:    1.25;
  --ap-leading-normal:  1.5;
  --ap-leading-relaxed: 1.65;

  /* Letter spacing */
  --ap-tracking-tight:   -0.025em;
  --ap-tracking-normal:  0;
  --ap-tracking-wide:    0.05em;
  --ap-tracking-wider:   0.08em;
  --ap-tracking-widest:  0.12em;

  /* Font weights */
  --ap-weight-light:     300;
  --ap-weight-regular:   400;
  --ap-weight-medium:    500;
  --ap-weight-semibold:  600;
  --ap-weight-bold:      700;
  --ap-weight-extrabold: 800;

  /* ------------------------------------------------------------------
     Spacing — 4px base unit
     ------------------------------------------------------------------ */
  --ap-space-1:  0.25rem;  /* 4px */
  --ap-space-2:  0.5rem;   /* 8px */
  --ap-space-3:  0.75rem;  /* 12px */
  --ap-space-4:  1rem;     /* 16px */
  --ap-space-5:  1.25rem;  /* 20px */
  --ap-space-6:  1.5rem;   /* 24px */
  --ap-space-8:  2rem;     /* 32px */
  --ap-space-10: 2.5rem;   /* 40px */
  --ap-space-12: 3rem;     /* 48px */
  --ap-space-16: 4rem;     /* 64px */
  --ap-space-20: 5rem;     /* 80px */
  --ap-space-24: 6rem;     /* 96px */
  --ap-space-32: 8rem;     /* 128px */
  --ap-space-40: 10rem;    /* 160px */

  /* Section padding */
  --ap-section-py:       var(--ap-space-24);
  --ap-section-py-sm:    var(--ap-space-16);

  /* ------------------------------------------------------------------
     Layout
     ------------------------------------------------------------------ */
  --ap-container-narrow: 800px;
  --ap-container:        1280px;
  --ap-container-wide:   1440px;
  --ap-container-px:     var(--ap-space-6);

  /* ------------------------------------------------------------------
     Borders & Radius
     ------------------------------------------------------------------ */
  --ap-radius-sm:   6px;
  --ap-radius-md:   10px;
  --ap-radius-lg:   16px;
  --ap-radius-xl:   24px;
  --ap-radius-full: 9999px;

  /* ------------------------------------------------------------------
     Shadows
     ------------------------------------------------------------------ */
  --ap-shadow-sm:    0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --ap-shadow-md:    0 4px 12px rgba(0,0,0,0.07);
  --ap-shadow-lg:    0 10px 30px rgba(0,0,0,0.08);
  --ap-shadow-xl:    0 20px 50px rgba(0,0,0,0.1);
  --ap-shadow-2xl:   0 25px 60px rgba(0,0,0,0.15);
  --ap-shadow-teal: 0 10px 40px rgba(10,191,170,0.15);
  --ap-shadow-nav:   0 2px 20px rgba(0,0,0,0.08);

  /* ------------------------------------------------------------------
     Transitions
     ------------------------------------------------------------------ */
  --ap-ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
  --ap-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ap-ease-out:     cubic-bezier(0, 0, 0.2, 1);

  --ap-duration-fast:    150ms;
  --ap-duration-normal:  250ms;
  --ap-duration-slow:    400ms;
  --ap-duration-slower:  500ms;

  /* ------------------------------------------------------------------
     Z-index scale
     ------------------------------------------------------------------ */
  --ap-z-base:    1;
  --ap-z-sticky:  100;
  --ap-z-nav:     1000;
  --ap-z-overlay: 2000;
  --ap-z-modal:   3000;
}

/* Reduced spacing on smaller screens */
@media (max-width: 767px) {
  :root {
    --ap-section-py:    var(--ap-space-16);
    --ap-section-py-sm: var(--ap-space-12);
    --ap-container-px:  var(--ap-space-5);
  }
}