/**
 * HCAIS Brand Identity Variables
 *
 * All design tokens for consistent theming across the site
 */

:root {
  /* ===== Colors ===== */

  /* Background Colors */
  --color-bg-primary: #0a1929;
  --color-bg-secondary: #1a2332;
  --color-bg-tertiary: #0d3d4d;

  /* Accent Colors */
  --color-accent-primary: #4dd0e1;
  --color-accent-secondary: #FF6B35;
  --color-accent-secondary-light: #FF8C61;
  --color-accent-teal: #00bfa5;
  --color-accent-cyan: #00acc1;
  --color-accent-dark-cyan: #00838f;

  /* Text Colors */
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.8);
  --color-text-tertiary: rgba(255, 255, 255, 0.7);
  --color-text-muted: rgba(255, 255, 255, 0.6);
  --color-text-inverted: #0a1929;

  /* Enhanced Glass Effect - Apple-style */
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-bg-light: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-border-subtle: rgba(255, 255, 255, 0.1);
  --glass-blur: 40px;
  --glass-blur-heavy: 60px;
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

  /* Overlay */
  --overlay-dark: rgba(10, 25, 41, 0.8);
  --overlay-teal: rgba(13, 61, 77, 0.8);
  --overlay-gradient: rgba(13, 61, 77, 0.85);

  /* ===== Gradients ===== */
  --gradient-bg: linear-gradient(135deg, #0a1929 0%, #1a2332 50%, #0d3d4d 100%);
  --gradient-text: linear-gradient(135deg, #ffffff 0%, #4dd0e1 100%);
  --gradient-accent: linear-gradient(135deg, #FF6B35 0%, #FF8C61 100%);
  --gradient-teal: linear-gradient(135deg, #00bfa5 0%, #4dd0e1 100%);
  --gradient-cyan: linear-gradient(135deg, #4dd0e1 0%, #00acc1 100%);
  --gradient-dark-cyan: linear-gradient(135deg, #00acc1 0%, #00838f 100%);
  --gradient-section-1: linear-gradient(180deg, rgba(10, 25, 41, 0.8) 0%, rgba(13, 61, 77, 0.8) 100%);
  --gradient-section-2: linear-gradient(180deg, rgba(13, 61, 77, 0.4) 0%, rgba(10, 25, 41, 0.4) 100%);
  --gradient-section-3: linear-gradient(180deg, rgba(10, 25, 41, 0.6) 0%, rgba(13, 61, 77, 0.6) 100%);
  --gradient-problem-card: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 140, 97, 0.05) 100%);
  --gradient-pillar-card: linear-gradient(135deg, rgba(77, 208, 225, 0.08) 0%, rgba(0, 191, 165, 0.04) 100%);

  /* ===== Spacing ===== */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 60px;
  --spacing-xl: 80px;
  --spacing-2xl: 120px;

  /* Container */
  --container-max-width: 1400px;
  --container-padding: 40px;

  /* Section Padding */
  --section-padding-y: 60px;
  --section-padding-x: 40px;

  /* ===== Typography - Apple System ===== */
  --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', 'Roboto', 'Helvetica Neue', system-ui, sans-serif;
  --font-family-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Font Sizes */
  --font-size-xs: 16px;
  --font-size-sm: 18px;
  --font-size-md: 20px;
  --font-size-lg: 24px;
  --font-size-xl: 28px;
  --font-size-2xl: 32px;
  --font-size-3xl: 36px;
  --font-size-4xl: 42px;
  --font-size-5xl: 48px;
  --font-size-6xl: 56px;
  --font-size-7xl: 72px;

  /* Line Heights */
  --line-height-tight: 1.1;
  --line-height-snug: 1.4;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.7;
  --line-height-extra-loose: 1.8;

  /* ===== Border Radius ===== */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 50%;

  /* ===== Shadows ===== */
  --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.25);
  --shadow-glow-orange: 0 0 30px rgba(255, 107, 53, 0.15);
  --shadow-glow-orange-hover: 0 10px 40px rgba(255, 107, 53, 0.25);
  --shadow-glow-orange-intense: 0 0 20px rgba(255, 107, 53, 0.3);
  --shadow-glow-cyan: 0 0 30px rgba(255, 107, 53, 0.2);
  --shadow-cta: 0 20px 60px rgba(255, 107, 53, 0.4);
  --shadow-cta-hover: 0 24px 80px rgba(255, 107, 53, 0.5);

  /* ===== Transitions ===== */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-all: all 0.3s ease;

  /* ===== Z-Index ===== */
  --z-background: 1;
  --z-content: 2;
  --z-shapes: 1;
  --z-overlay: 2;
  --z-content-above: 3;
  --z-nav: 1000;
  --z-whatsapp-button: 9999;

  /* ===== Breakpoints (for reference in JS) ===== */
  --breakpoint-mobile: 375px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1200px;
  --breakpoint-wide: 1400px;
}

/* ===== Responsive Adjustments ===== */

@media (max-width: 1200px) {
  :root {
    --font-size-7xl: 56px;
    --font-size-5xl: 42px;
    --font-size-3xl: 32px;
  }
}

@media (max-width: 768px) {
  :root {
    /* Spacing */
    --spacing-lg: 48px;
    --spacing-xl: 60px;
    --spacing-2xl: 100px;
    --container-padding: 24px;
    --section-padding-y: 60px;
    --section-padding-x: 24px;

    /* Typography */
    --font-size-7xl: 40px;
    --font-size-5xl: 36px;
    --font-size-3xl: 24px;
    --font-size-2xl: 22px;
    --font-size-xl: 20px;
    --font-size-md: 16px;
  }
}