/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");

/*=============== ACCESSIBILITY ===============*/
/* Skip to main content link for screen readers */
.skip-to-main {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-primary-navy);
  color: var(--color-white);
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  font-weight: var(--font-semi-bold);
  z-index: 10000;
  border-radius: 0 0 0.5rem 0;
  transition: top 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.skip-to-main:focus {
  top: 0;
  opacity: 1;
  pointer-events: auto;
  outline: 3px solid var(--color-accent-primary);
  outline-offset: 2px;
}

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  /* Base Monochrome Colors */
  --color-black: #000000;
  --color-near-black: #111111;
  --color-dark-gray: #333333;
  --color-medium-gray: #555555;
  --color-gray: #777777;
  --color-light-gray: #999999;
  --color-lighter-gray: #bbbbbb;
  --color-lightest-gray: #e0e0e0;
  --color-off-white: #f7f7f7;
  --color-white: #ffffff;

  /* Additional Monochrome Shades */
  --color-charcoal: #222222;
  --color-slate: #444444;
  --color-silver: #cccccc;
  --color-smoke: #eeeeee;

  /*========== Cyber Neon Theme - 4 Color Functional System ==========*/
  /* Base Color - Navy (Trust, Foundation, Background) */
  --color-primary-navy: #003366;
  --color-primary-blue: #004080;
  --color-primary-dark: #002244;
  --color-primary-light: #0059B3;
  
  /* Primary Accent - Cyan #00D9FF (Main CTAs, Primary Actions, Key Highlights) */
  --color-accent-primary: #00D9FF;
  --color-accent-primary-light: #33E1FF;
  --color-accent-primary-dark: #00B8CC;
  
  /* Secondary Accent - Purple #B026FF (Secondary Actions, Gaming Energy, Highlights) */
  --color-accent-secondary: #B026FF;
  --color-accent-secondary-light: #C04DFF;
  --color-accent-secondary-dark: #8A1ECC;
  
  /* Interactive Accent - Electric Blue #0066FF (Hover States, Links, Interactive Elements) */
  --color-accent-interactive: #0066FF;
  --color-accent-interactive-light: #3385FF;
  --color-accent-interactive-dark: #004DCC;
  
  /* Legacy support (mapped to new colors) */
  --color-accent-green: #00D9FF; /* Cyan for primary */
  --color-accent-green-light: #33E1FF;
  --color-accent-gold: #B026FF; /* Purple for secondary */
  --color-accent-gold-light: #C04DFF;
  
  /* Text Colors */
  --color-text-primary: #2C3E50;
  --color-text-secondary: #5D6D7E;
  --color-text-muted: #7F8C8D;
  
  /* Background Colors */
  --color-bg-light: #F5F7FA;
  --color-bg-lighter: #ECF0F1;
  --color-bg-white: #FFFFFF;
  
  /* Border Colors */
  --color-border-light: #E1E8ED;
  --color-border-medium: #BDC3C7;
  --color-border-dark: #95A5A6;
  
  /* Status Colors - Using 4-Color System */
  --color-success: #00D9FF; /* Cyan for success */
  --color-success-light: rgba(0, 217, 255, 0.1);
  --color-warning: #B026FF; /* Purple for warnings */
  --color-warning-light: rgba(176, 38, 255, 0.1);
  --color-error: #E74C3C; /* Keep red for errors - critical */
  --color-error-light: rgba(231, 76, 60, 0.1);
  --color-info: #0066FF; /* Electric Blue for info */
  --color-info-light: rgba(0, 102, 255, 0.1);

  /*========== Cyber Neon Gradients ==========*/
  /* Primary Gradient - Navy to Cyan (Main CTAs, Hero sections) */
  --gradient-primary: linear-gradient(135deg, #003366 0%, #00D9FF 100%);
  --gradient-primary-dark: linear-gradient(135deg, #002244 0%, #003366 100%);
  
  /* Accent Gradient - Cyan to Purple (Secondary CTAs, Highlights) */
  --gradient-accent: linear-gradient(135deg, #00D9FF 0%, #B026FF 100%);
  
  /* Gaming Gradient - Purple to Electric Blue (Gaming sections, Energy) */
  --gradient-gold: linear-gradient(135deg, #B026FF 0%, #0066FF 100%);
  
  /* Interactive Gradient - Electric Blue to Cyan (Hover states, Interactive) */
  --gradient-interactive: linear-gradient(135deg, #0066FF 0%, #00D9FF 100%);
  
  /* Subtle Background Gradient */
  --gradient-subtle: linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%);
  
  /* Cyber Neon Full Gradient (Hero backgrounds, Special sections) */
  --gradient-cyber-neon: linear-gradient(135deg, #003366 0%, #00D9FF 50%, #B026FF 100%);

  /*========== Font and typography ==========*/
  --body-font: "Inter", sans-serif;
  --biggest-font-size: 2rem; /* H1 */
  --h1-font-size: 1.75rem;
  --h2-font-size: 1.5rem; /* Section Titles */
  --h3-font-size: 1.25rem; /* Subheadings, card titles */
  --normal-font-size: 1rem; /* Body text */
  --small-font-size: 0.875rem; /* Smaller text, labels */
  --smaller-font-size: 0.813rem; /* Disclaimers, captions */

  /*========== Font weight ==========*/
  --font-regular: 400;
  --font-semi-bold: 600;
  --font-bold: 700;

  /*========== Margenes Bottom ==========*/
  --mb-0-25: 0.25rem;
  --mb-0-5: 0.5rem;
  --mb-0-75: 0.75rem;
  --mb-1: 1rem;
  --mb-1-5: 1.5rem;
  --mb-2: 2rem;
  --mb-2-5: 2.5rem;
  --mb-3: 3rem;
  --mb-4: 4rem;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
  --z-modal: 1000;

  /*========== UI/UX Design Tokens ==========*/
  /* Border Radius - Consistent rounded corners */
  --radius-sm: 0.375rem;    /* 6px - Small elements */
  --radius-md: 0.5rem;      /* 8px - Buttons, inputs */
  --radius-lg: 0.75rem;     /* 12px - Cards */
  --radius-xl: 1rem;        /* 16px - Large cards */
  --radius-full: 9999px;    /* Full circle */

  /* Shadows - Elevation system */
  --shadow-sm: 0 1px 2px rgba(0, 51, 102, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 51, 102, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 51, 102, 0.15);
  --shadow-xl: 0 12px 48px rgba(0, 51, 102, 0.2);
  
  /* Neon Glow Effects */
  --glow-cyan: 0 0 20px rgba(0, 217, 255, 0.4), 0 0 40px rgba(0, 217, 255, 0.2);
  --glow-purple: 0 0 20px rgba(176, 38, 255, 0.4), 0 0 40px rgba(176, 38, 255, 0.2);
  --glow-blue: 0 0 20px rgba(0, 102, 255, 0.4), 0 0 40px rgba(0, 102, 255, 0.2);
  --glow-neon: 0 0 30px rgba(0, 217, 255, 0.3), 0 0 60px rgba(176, 38, 255, 0.2);

  /* Transitions - Smooth animations */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Spacing Scale - 8px base unit */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
}

/* Dark Mode Variables */
.dark-theme {
  /* Dark Mode Colors */
  --color-black: #ffffff;
  --color-near-black: #f7f7f7;
  --color-dark-gray: #e0e0e0;
  --color-medium-gray: #bbbbbb;
  --color-gray: #999999;
  --color-light-gray: #777777;
  --color-lighter-gray: #555555;
  --color-lightest-gray: #333333;
  --color-off-white: #222222;
  --color-white: #111111;

  --color-charcoal: #eeeeee;
  --color-slate: #cccccc;
  --color-silver: #444444;
  --color-smoke: #222222;

  /* Cyber Neon Dark Mode Colors */
  --color-primary-navy: #1A4D7A;
  --color-primary-blue: #2E6BA0;
  --color-primary-dark: #0F2A44;
  --color-primary-light: #4A8FC7;
  
  /* Primary Accent - Cyan (brighter in dark mode) */
  --color-accent-primary: #00E5FF;
  --color-accent-primary-light: #33EBFF;
  --color-accent-primary-dark: #00B8CC;
  
  /* Secondary Accent - Purple (brighter in dark mode) */
  --color-accent-secondary: #C04DFF;
  --color-accent-secondary-light: #D373FF;
  --color-accent-secondary-dark: #A01ECC;
  
  /* Interactive Accent - Electric Blue (brighter in dark mode) */
  --color-accent-interactive: #3385FF;
  --color-accent-interactive-light: #5CA3FF;
  --color-accent-interactive-dark: #004DCC;
  
  /* Legacy support for dark mode */
  --color-accent-green: #00E5FF; /* Cyan for primary */
  --color-accent-green-light: #33EBFF;
  --color-accent-gold: #C04DFF; /* Purple for secondary */
  --color-accent-gold-light: #D373FF;
  
  --color-text-primary: #E8E8E8;
  --color-text-secondary: #B8B8B8;
  --color-text-muted: #888888;
  
  --color-bg-light: #1A1A1A;
  --color-bg-lighter: #222222;
  --color-bg-white: #0F0F0F;
  
  --color-border-light: #333333;
  --color-border-medium: #444444;
  --color-border-dark: #555555;
  
  /* Dark Mode Status Colors */
  --color-success: #00E5FF; /* Cyan */
  --color-success-light: #0A1A1F;
  --color-warning: #C04DFF; /* Purple */
  --color-warning-light: #1A0F1F;
  --color-error: #E74C3C;
  --color-error-light: #1F0A0A;
  --color-info: #3385FF; /* Electric Blue */
  --color-info-light: #0F1A2F;
  
  /* Dark Mode Gradients */
  --gradient-primary: linear-gradient(135deg, #1A4D7A 0%, #00E5FF 100%);
  --gradient-primary-dark: linear-gradient(135deg, #0F2A44 0%, #1A4D7A 100%);
  --gradient-accent: linear-gradient(135deg, #00E5FF 0%, #C04DFF 100%);
  --gradient-gold: linear-gradient(135deg, #C04DFF 0%, #3385FF 100%);
  --gradient-interactive: linear-gradient(135deg, #3385FF 0%, #00E5FF 100%);
  --gradient-subtle: linear-gradient(180deg, #0F0F0F 0%, #1A1A1A 100%);
  --gradient-cyber-neon: linear-gradient(135deg, #1A4D7A 0%, #00E5FF 50%, #C04DFF 100%);
}

/*========== Responsive typography ==========*/
@media screen and (min-width: 1024px) {
  :root {
    --biggest-font-size: 3.5rem;
    --h1-font-size: 2.75rem;
    --h2-font-size: 2rem;
    --h3-font-size: 1.5rem;
    --normal-font-size: 1.125rem;
    --small-font-size: 0.938rem;
    --smaller-font-size: 0.875rem;
  }
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

input::placeholder,
textarea::placeholder,
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input::-moz-placeholder,
textarea::-moz-placeholder,
input:-ms-input-placeholder,
textarea:-ms-input-placeholder,
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  color: var(--color-dark-gray);
  opacity: 1; 
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--color-white);
  color: var(--color-dark-gray);
  transition: background-color var(--transition-base), color var(--transition-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
  color: var(--color-near-black);
  font-weight: var(--font-semi-bold);
  transition: color 0.4s;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: var(--color-dark-gray);
  transition: color 0.4s;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block; /* Prevent extra space below images */
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.grid {
  display: grid;
  gap: 1.5rem;
}

.section {
  padding: 4rem 0 2rem;
}

.section-title {
  font-size: var(--h2-font-size);
  margin-bottom: var(--mb-2);
  text-align: center;
  font-weight: var(--font-bold);
  line-height: 1.3;
}

.section-subtitle {
  display: block;
  font-size: var(--small-font-size);
  color: var(--color-medium-gray);
  text-align: center;
  font-weight: var(--font-semi-bold);
  margin-bottom: var(--mb-0-5);
  transition: color 0.4s;
}

.message {
  border: 1px solid var(--color-lightest-gray);
  background-color: var(--color-off-white);
  border-radius: 0.5rem;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  padding: 1rem;
  display: flex;
  align-items: start;
  gap: 0.5rem;
}

.messages i {
  color: var(--color-near-black);
}