/* ==========================================================================
   ETC-MEDMED Design Tokens
   Source: reference.md
   ========================================================================== */

:root {
  /* ========================================
     Colors - Core Brand
     ======================================== */
  --navy-900: #0B1428;  /* Deepest - headers, hero corner */
  --navy-800: #0F1A2F;  /* Primary background, footer */
  --blue-600: #2A4E99;  /* Primary action, highlights */
  --blue-500: #30508D;  /* Secondary accents, hovers */
  --blue-700: #1E3A6E;  /* Darker blue for hover states */
  --navy-700: #162242;  /* Between navy-800 and navy-900 */

  /* ========================================
     Colors - Neutrals & Backgrounds
     ======================================== */
  --bg-ice: #F0F9FC;    /* Light section background */
  --surface: #FFFFFF;   /* Cards, content surface */
  --border: #D8E4EC;    /* Dividers, card borders */
  --muted: #8FA0AC;     /* Muted text, icons */

  /* ========================================
     Colors - Text
     ======================================== */
  --text: var(--navy-900);
  --text-muted: #5B6B7A;
  --text-on-dark: #FFFFFF;
  --text-on-primary: #FFFFFF;
  --text-primary: var(--navy-900);
  --text-secondary: #4A5568;

  /* ========================================
     Colors - Semantic
     ======================================== */
  --color-success: #10B981;
  --color-error: #EF4444;
  --color-warning: #F59E0B;
  --color-nano-banana: #FFE135;

  /* Form Feedback Colors */
  --color-error-bg: #fef2f2;
  --color-error-border: #fecaca;
  --color-success-bg: #f0fdf4;
  --color-success-border: #bbf7d0;

  /* ========================================
     Gradients
     ======================================== */
  --gradient-hero: linear-gradient(135deg, #0F1A2F 0%, #2A4E99 100%);
  --gradient-button: linear-gradient(180deg, #30508D 0%, #2A4E99 100%);

  /* ========================================
     Typography - Font Families
     ======================================== */
  --font-heading: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ========================================
     Typography - Font Sizes (Desktop)
     ======================================== */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.375rem;  /* 22px */
  --text-3xl: 1.75rem;   /* 28px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */

  /* ========================================
     Typography - Line Heights
     ======================================== */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ========================================
     Typography - Font Weights
     ======================================== */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* ========================================
     Spacing Scale
     ======================================== */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2.5rem;    /* 40px */
  --space-2xl: 3.5rem;   /* 56px */
  --space-3xl: 5rem;     /* 80px */

  /* ========================================
     Border Radius
     ======================================== */
  --radius-sm: 0.625rem;  /* 10px */
  --radius-md: 1rem;      /* 16px */
  --radius-lg: 1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* ========================================
     Shadows
     ======================================== */
  --shadow-sm: 0 1px 2px rgba(11, 20, 40, 0.05);
  --shadow-card: 0 10px 30px rgba(11, 20, 40, 0.10);
  --shadow-md: 0 15px 35px rgba(11, 20, 40, 0.12);
  --shadow-lg: 0 20px 40px rgba(11, 20, 40, 0.15);
  --shadow-header: 0 2px 10px rgba(11, 20, 40, 0.08);

  /* ========================================
     Layout
     ======================================== */
  --container-max: 1200px;
  --container-padding: 1rem;      /* Mobile */
  --container-padding-md: 1.5rem; /* Tablet */
  --container-padding-lg: 2rem;   /* Desktop */

  /* ========================================
     Section Spacing
     ======================================== */
  --section-padding: 2.5rem;      /* Mobile: 40px */
  --section-padding-md: 3.5rem;   /* Tablet: 56px */
  --section-padding-lg: 5rem;     /* Desktop: 80px */

  /* ========================================
     Transitions
     ======================================== */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-smooth: 400ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ========================================
     Animation Timing
     ======================================== */
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out-smooth: cubic-bezier(0.45, 0, 0.55, 1);
  --animation-duration: 600ms;
  --animation-stagger: 100ms;

  /* ========================================
     Z-Index Scale
     ======================================== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-modal: 400;
  --z-tooltip: 500;

  /* ========================================
     Breakpoints (for reference in JS)
     ======================================== */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  /* ========================================
     Logo Utilities
     ======================================== */
  .logo-dark {
    filter: invert(1) brightness(0);
  }
}