/**
 * Security Mixologists - CSS Variables
 * Design system color palette, typography, and spacing tokens
 */

:root {
  /* ============================================
     TWO-TONE TEAL COLOR SYSTEM
     ============================================ */

  /* Teal - Light backgrounds (white sections, main content) */
  --teal-light-primary: #1A9BAD;      /* Bright teal - matches logo */
  --teal-light-hover: #168A9C;        /* Hover state for light backgrounds */

  /* Teal - Dark backgrounds (hero, nav, CTA, footer) */
  --teal-dark-primary: #5A9FA5;       /* Muted teal - primary accent on dark */
  --teal-dark-secondary: #7FB9BF;     /* Lighter muted - icons, highlights */
  --teal-dark-soft: #A8CDD1;          /* Soft teal - accent text on dark */
  --teal-dark-hover: #4D9FA8;         /* Hover state for dark backgrounds */

  /* ============================================
     BACKGROUND COLORS
     ============================================ */
  /* Dark backgrounds */
  --bg-dark-primary: #0f172a;         /* Slate-900 - hero, nav, footer */
  --bg-dark-secondary: #1e293b;       /* Slate-800 - secondary dark sections */

  /* Light backgrounds */
  --bg-light-primary: #ffffff;        /* White - main content */
  --bg-light-secondary: #f8fafc;      /* Slate-50 - subtle sections */
  --bg-light-tertiary: #f1f5f9;       /* Slate-100 - affiliations bar */

  /* ============================================
     TEXT COLORS
     ============================================ */
  /* Text on light backgrounds */
  --text-primary: #1F2937;            /* Gray-900 - body text, headings */
  --text-secondary: #475569;          /* Slate-600 - secondary text */
  --text-tertiary: #6B7280;           /* Gray-500 - tertiary text */

  /* Text on dark backgrounds */
  --text-on-dark-primary: #ffffff;    /* White - primary text */
  --text-on-dark-secondary: #cbd5e1;  /* Slate-300 - secondary text */
  --text-on-dark-tertiary: #94a3b8;   /* Slate-400 - tertiary text */

  /* ============================================
     BORDER COLORS
     ============================================ */
  --border-light: #e2e8f0;            /* Slate-200 - borders on light */
  --border-light-secondary: #cbd5e1;  /* Slate-300 - emphasis borders */
  --border-dark: #334155;             /* Slate-700 - borders on dark */

  /* Legacy compatibility (will be phased out) */
  --color-primary: #0D4F5C;
  --color-primary-light: #1A9BAD;
  --color-accent: #7FA99B;
  --color-text: #1F2937;
  --color-text-secondary: #6B7280;
  --color-bg: #FFFFFF;
  --color-bg-secondary: #F3F4F6;
  --color-hover: #0A3D47;
  --color-focus: #1A9BAD;
  --color-border: #E5E7EB;
  --color-border-dark: #D1D5DB;

  /* ============================================
     TYPOGRAPHY
     ============================================ */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Font Sizes */
  --font-size-xs: 0.75rem;            /* 12px */
  --font-size-sm: 0.875rem;           /* 14px */
  --font-size-base: 1rem;             /* 16px */
  --font-size-lg: 1.125rem;           /* 18px */
  --font-size-xl: 1.25rem;            /* 20px */
  --font-size-2xl: 1.5rem;            /* 24px - H3 */
  --font-size-3xl: 1.875rem;          /* 30px */
  --font-size-4xl: 2.25rem;           /* 36px - H2 */
  --font-size-5xl: 3rem;              /* 48px - H1 */

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.1;
  --line-height-snug: 1.2;
  --line-height-normal: 1.3;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.7;

  /* ============================================
     SPACING SCALE
     ============================================ */
  --spacing-1: 0.25rem;               /* 4px */
  --spacing-2: 0.5rem;                /* 8px */
  --spacing-3: 0.75rem;               /* 12px */
  --spacing-4: 1rem;                  /* 16px */
  --spacing-5: 1.25rem;               /* 20px */
  --spacing-6: 1.5rem;                /* 24px */
  --spacing-8: 2rem;                  /* 32px */
  --spacing-10: 2.5rem;               /* 40px */
  --spacing-12: 3rem;                 /* 48px */
  --spacing-16: 4rem;                 /* 64px */
  --spacing-20: 5rem;                 /* 80px */
  --spacing-24: 6rem;                 /* 96px */

  /* ============================================
     LAYOUT
     ============================================ */
  --container-max-width: 1280px;      /* Main content container */
  --container-prose-width: 800px;     /* Long-form content */
  --container-padding: 1.5rem;        /* Default container padding */

  /* ============================================
     BORDERS & RADIUS
     ============================================ */
  --border-radius-sm: 0.375rem;       /* 6px */
  --border-radius: 0.5rem;            /* 8px */
  --border-radius-lg: 0.75rem;        /* 12px */
  --border-radius-full: 9999px;       /* Fully rounded */

  --border-width: 1px;
  --border-width-thick: 2px;

  /* ============================================
     SHADOWS
     ============================================ */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* ============================================
     TRANSITIONS
     ============================================ */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;

  /* ============================================
     BREAKPOINTS (for reference in JS)
     ============================================ */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  /* ============================================
     Z-INDEX SCALE
     ============================================ */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-modal: 100;
  --z-toast: 200;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Tablet and up */
@media (min-width: 768px) {
  :root {
    --container-padding: 2rem;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  :root {
    --container-padding: 3rem;
  }
}