/* ============================================
   variables.css - Design Tokens & Theme Variables
   ============================================ */

:root {
  /* Brand Colors */
  --primary-dark: #121358;
  --primary-mid: #232F72;
  --primary-light: #2F578A;
  --logo-blue: #063B96;
  --logo-sky: #3886D1;
  --logo-white: #FEFEFE;

  /* Accent */
  --accent: #3886D1;
  --accent-hover: #4A9AE4;
  --accent-glow: rgba(56, 134, 209, 0.3);
  --accent-light: rgba(56, 134, 209, 0.08);
  --success: #2ED47A;
  --warning: #FFB946;
  --error: #FF6B6B;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #121358, #2F578A);
  --gradient-accent: linear-gradient(135deg, #063B96, #3886D1);
  --gradient-glow: linear-gradient(135deg, rgba(56, 134, 209, 0.15), rgba(18, 19, 88, 0.15));
  --gradient-border: linear-gradient(135deg, #3886D1, #121358, #2F578A);

  /* ======== DARK THEME (default) ======== */
  --bg-primary: #0a0a1a;
  --bg-secondary: #12122a;
  --bg-card: rgba(18, 19, 88, 0.4);
  --bg-glass: rgba(10, 10, 30, 0.8);
  --bg-elevated: rgba(18, 19, 88, 0.6);
  --bg-stats: var(--gradient-primary);
  --bg-wave: #0a0a1a;
  --bg-wave-secondary: #12122a;
  --bg-wave-primary: var(--primary-dark);

  /* Text */
  --text-primary: #F0F0FF;
  --text-secondary: #B0B8D0;
  --text-muted: #6B7A9F;

  /* Borders */
  --border-color: rgba(255, 255, 255, 0.05);
  --border-hover: rgba(255, 255, 255, 0.12);
  --border-accent: rgba(56, 134, 209, 0.2);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 40px rgba(56, 134, 209, 0.15);

  /* Navigation */
  --nav-bg-scrolled: rgba(10, 10, 30, 0.8);
  --nav-link: #B0B8D0;
  --nav-link-hover: #F0F0FF;
  --nav-logo-text: #F0F0FF;
  --nav-toggle-bg: rgba(255, 255, 255, 0.05);
  --nav-toggle-bar: #B0B8D0;

  /* Buttons */
  --btn-secondary-text: #FEFEFE;
  --btn-secondary-border: rgba(255, 255, 255, 0.2);

  /* Cards */
  --card-bg-glass: rgba(18, 19, 88, 0.4);
  --card-bg-elevated: rgba(18, 19, 88, 0.6);

  /* Gallery */
  --gallery-overlay: linear-gradient(to top, rgba(10, 10, 26, 0.9), transparent);
  --gallery-bg: var(--gradient-card);
  --gallery-hover-bg: var(--bg-elevated);

  /* Timeline */
  --timeline-dot-border: #0a0a1a;

  /* Loading */
  --loading-bg: #0a0a1a;
  --loading-bar-bg: rgba(255, 255, 255, 0.1);

  /* Stats */
  --stats-text: #F0F0FF;
  --stats-icon: var(--accent);

  /* Section backgrounds */
  --section-services-bg: #12122a;
  --section-contact-bg: #12122a;
}

/* ======== LIGHT THEME ======== */
body.light-theme {
  --bg-primary: #F8F9FE;
  --bg-secondary: #EDEFF8;
  --bg-card: rgba(255, 255, 255, 0.7);
  --bg-glass: rgba(248, 249, 254, 0.85);
  --bg-elevated: rgba(255, 255, 255, 0.9);
  --bg-stats: #F8F9FE;
  --bg-wave: #F8F9FE;
  --bg-wave-secondary: #EDEFF8;
  --bg-wave-primary: #EDEFF8;

  --text-primary: #1A1A2E;
  --text-secondary: #4A4A6A;
  --text-muted: #7A7A9A;

  --border-color: rgba(0, 0, 0, 0.05);
  --border-hover: rgba(0, 0, 0, 0.1);
  --border-accent: rgba(56, 134, 209, 0.15);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 40px rgba(56, 134, 209, 0.1);

  --nav-bg-scrolled: rgba(248, 249, 254, 0.85);
  --nav-link: #4A4A6A;
  --nav-link-hover: #1A1A2E;
  --nav-logo-text: #1A1A2E;
  --nav-toggle-bg: rgba(0, 0, 0, 0.05);
  --nav-toggle-bar: #4A4A6A;

  --btn-secondary-text: #1A1A2E;
  --btn-secondary-border: rgba(0, 0, 0, 0.15);

  --card-bg-glass: rgba(255, 255, 255, 0.75);
  --card-bg-elevated: rgba(255, 255, 255, 0.9);

  --gallery-overlay: linear-gradient(to top, rgba(248, 249, 254, 0.95), transparent);
  --gallery-bg: rgba(255, 255, 255, 0.7);
  --gallery-hover-bg: rgba(255, 255, 255, 0.85);

  --timeline-dot-border: #F8F9FE;

  --loading-bg: #F8F9FE;
  --loading-bar-bg: rgba(0, 0, 0, 0.08);

  --stats-text: #1A1A2E;
  --stats-icon: var(--accent);

  --section-services-bg: #EDEFF8;
  --section-contact-bg: #EDEFF8;
}

/* ======== SHARED TOKENS ======== */
:root {
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --font-size-5xl: 3.5rem;
  --font-size-6xl: 4.5rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.15;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-4xl: 6rem;
  --spacing-5xl: 8rem;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 50%;

  --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-extra-slow: 800ms cubic-bezier(0.4, 0, 0.2, 1);

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-loading: 500;
  --z-cursor: 600;

  --max-width: 1200px;
  --nav-height: 80px;
  --nav-height-scrolled: 64px;
}