/* ==========================================================================
   Design tokens — ported 1:1 from the React app's src/styles/globals.css
   Tailwind @theme block. Do not "improve" these values; they are the source
   of truth for visual parity with the original site.
   ========================================================================== */

:root {
  /* Fonts (same Google Fonts as the React app: Inter + Manrope) */
  --te-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --te-font-display: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Navy (neutral/dark) scale */
  --te-navy-950: #060b18;
  --te-navy-900: #0b1220;
  --te-navy-800: #101a30;
  --te-navy-700: #16213d;
  --te-navy-600: #1c2c4d;
  --te-navy-500: #2a3d66;
  --te-navy-200: #c7d0e0; /* derived: border-navy-200 usage */
  --te-navy-100: #e4e8f0; /* derived: border-navy-100 usage */
  --te-navy-50: #f3f5f9; /* derived: bg-navy-50 usage */

  /* Brand (primary) scale — retargeted to the teal used across the new
     visual reference (buttons, links, active nav state, mega-menu, header/
     footer accents). Same variable names throughout the codebase, so this
     one change recolors every shared component consistently. */
  --te-brand-50: #eaf5f4;
  --te-brand-100: #cde8e6;
  --te-brand-200: #9dd2ce;
  --te-brand-300: #68b8b2;
  --te-brand-400: #3d9f98;
  --te-brand-500: #24837d;
  --te-brand-600: #1a6e69;
  --te-brand-700: #155852;
  --te-brand-800: #124743;
  --te-brand-900: #0f3a37;

  /* Accent (secondary) scale — retargeted to the amber/orange used for
     eyebrow labels, badges, and secondary CTAs in the new visual reference. */
  --te-accent-400: #f5b04a;
  --te-accent-500: #f0a02e;
  --te-accent-600: #e08a16;

  /* Warm off-white used for the Home page's light section backgrounds in
     the new visual reference, in place of plain white. */
  --te-cream-50: #faf7f1;
  --te-cream-100: #f4efe4;

  /* Shadows */
  --te-shadow-card: 0 1px 2px rgba(11, 18, 32, 0.04), 0 8px 24px -8px rgba(11, 18, 32, 0.12);
  --te-shadow-card-hover: 0 4px 12px rgba(11, 18, 32, 0.08), 0 20px 40px -12px rgba(11, 18, 32, 0.18);
  --te-shadow-card-glow: 0 0 0 1px rgba(28, 125, 255, 0.16), 0 0 28px -4px rgba(23, 201, 174, 0.28),
    0 20px 40px -12px rgba(11, 18, 32, 0.18);

  /* Radii (Tailwind rounded-lg / rounded-xl / rounded-2xl / rounded-3xl) */
  --te-radius-lg: 0.5rem;
  --te-radius-xl: 0.75rem;
  --te-radius-2xl: 1.25rem;
  --te-radius-3xl: 1.75rem;

  /* Buttons render fully pill-shaped in the new visual reference. */
  --te-btn-radius: 9999px;

  /* Spacing scale subset actually used by the layout primitives below */
  --te-container-max: 80rem; /* Tailwind max-w-7xl */
  --te-container-pad: 1.25rem; /* px-5 */

  /* Breakpoints, documented for reference (media queries below use the
     literal px values since CSS custom properties cannot be used inside
     @media conditions) */
  /* sm: 640px · md: 768px · lg: 1024px · xl: 1280px */
}