/**
 * @file tokens.css
 * Design tokens de Syntek Integral Services
 * SDD: docs/04-design-system.md
 * Soporte para Modo Claro (Default), Modo Oscuro y Preferencia de Sistema
 */

/* =========================================
   MODO CLARO (POR DEFECTO) & TOKENS BASE
   60% Fondos claros técnicos
   30% Azul oscuro corporativo y superficies
   10% Acentos tecnológicos (Tech Blue, Cyan)
   ========================================= */
:root,
[data-theme="light"] {
  --theme-name: "light";

  /* Fondos y Superficies (60% Dominante) */
  --color-bg-base: #F8FAFD;            /* Fondo base claro técnico */
  --color-bg-deep: #EFF3F9;            /* Fondo secundario de contraste suave */
  --color-bg-surface: #FFFFFF;         /* Superficie de tarjetas / contenedores */
  --color-bg-elevated: #FFFFFF;        /* Superficie elevada / hover */
  --color-bg-card: #FFFFFF;            /* Cards de servicios y propuesta */
  --color-bg-glass: rgba(255, 255, 255, 0.92);

  /* Bordes & Líneas */
  --color-border-subtle: rgba(10, 15, 44, 0.08);
  --color-border-hover: rgba(0, 102, 255, 0.25);
  --color-border-glow: rgba(0, 102, 255, 0.18);
  --color-card-border: rgba(10, 15, 44, 0.08);
  --color-card-border-active: rgba(0, 102, 255, 0.4);

  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(10, 15, 44, 0.04);
  --shadow-md: 0 6px 20px rgba(10, 15, 44, 0.06);
  --shadow-card: 0 8px 24px rgba(10, 15, 44, 0.05);
  --shadow-card-hover: 0 16px 36px rgba(0, 102, 255, 0.1);
  --shadow-header: 0 4px 20px rgba(10, 15, 44, 0.05);
  --shadow-modal: 0 24px 60px rgba(10, 15, 44, 0.2);

  /* Textos y Tipografía (30% Soporte) */
  --color-text-primary: #0A0F2C;       /* Azul oscuro corporativo de máxima legibilidad */
  --color-text-secondary: #334155;     /* Slate oscuro para párrafos */
  --color-text-muted: #64748B;         /* Slate intermedio */
  --color-text-dim: #94A3B8;           /* Slate atenuado */
  --color-white: #FFFFFF;
  --color-dark: #0A0F2C;
  --color-dark-deep: #06091E;

  /* Acentos Tecnológicos (10%) */
  --color-blue: #0066FF;               /* Tech Blue */
  --color-cyan: #008AA8;               /* Cyan calibrado para contraste WCAG AA sobre fondo claro */
  --color-cyan-glow: #00E5FF;          /* Cyan brillante para acentos en GPU/luces */
  --color-purple: #7B2FF7;             /* Púrpura Inteligente */

  /* Gradientes */
  --gradient-tech: linear-gradient(135deg, #0066FF 0%, #0099CC 100%);
  --gradient-intel: linear-gradient(135deg, #0066FF 0%, #7B2FF7 100%);
  --gradient-hero: linear-gradient(180deg, rgba(248, 250, 253, 0.55) 0%, rgba(248, 250, 253, 0.88) 60%, #F8FAFD 100%);
  --gradient-glow: radial-gradient(circle at 50% 50%, rgba(0, 102, 255, 0.08) 0%, transparent 70%);

  /* Header y Navegación */
  --color-header-bg: rgba(255, 255, 255, 0.92);
  --color-header-border: rgba(10, 15, 44, 0.06);

  /* Footer Corporativo (Anclaje tecnológico institucional) */
  --color-footer-bg: #0A0F2C;
  --color-footer-border: rgba(255, 255, 255, 0.08);
  --color-footer-text: #FFFFFF;
  --color-footer-muted: #8E9AB8;

  /* Scrollbar */
  --scrollbar-track: #EFF3F9;
  --scrollbar-thumb: rgba(0, 102, 255, 0.25);
  --scrollbar-thumb-hover: #0066FF;
}

/* =========================================
   MODO OSCURO (DARK THEME)
   60% Dark Navy profundo
   30% Blanco y superficies elevadas
   10% Acentos Cyan y Purple
   ========================================= */
[data-theme="dark"] {
  --theme-name: "dark";

  /* Fondos y Superficies (60% Dominante) */
  --color-bg-base: #0A0F2C;
  --color-bg-deep: #06091E;
  --color-bg-surface: #0E1538;
  --color-bg-elevated: #151E4E;
  --color-bg-card: #0E1538;
  --color-bg-glass: rgba(10, 15, 44, 0.88);

  /* Bordes & Líneas */
  --color-border-subtle: rgba(0, 229, 255, 0.15);
  --color-border-hover: rgba(0, 229, 255, 0.35);
  --color-border-glow: rgba(0, 229, 255, 0.2);
  --color-card-border: rgba(0, 229, 255, 0.1);
  --color-card-border-active: rgba(0, 229, 255, 0.35);

  /* Sombras */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 14px 40px rgba(0, 229, 255, 0.15);
  --shadow-header: 0 10px 30px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 24px 70px rgba(0, 0, 0, 0.7);

  /* Textos y Tipografía (30% Soporte) */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #B0BCCE;
  --color-text-muted: #7E8D9F;
  --color-text-dim: #4A5568;
  --color-white: #FFFFFF;
  --color-dark: #0A0F2C;
  --color-dark-deep: #06091E;

  /* Acentos Tecnológicos (10%) */
  --color-blue: #0066FF;
  --color-cyan: #00E5FF;
  --color-cyan-glow: #00E5FF;
  --color-purple: #7B2FF7;

  /* Gradientes */
  --gradient-tech: linear-gradient(135deg, #0066FF 0%, #00E5FF 100%);
  --gradient-intel: linear-gradient(135deg, #00E5FF 0%, #7B2FF7 100%);
  --gradient-hero: linear-gradient(180deg, rgba(10, 15, 44, 0.4) 0%, rgba(10, 15, 44, 0.8) 60%, #0A0F2C 100%);
  --gradient-glow: radial-gradient(circle at 50% 50%, rgba(0, 229, 255, 0.12) 0%, transparent 70%);

  /* Header y Navegación */
  --color-header-bg: rgba(10, 15, 44, 0.88);
  --color-header-border: rgba(0, 229, 255, 0.1);

  /* Footer */
  --color-footer-bg: #06091E;
  --color-footer-border: rgba(0, 229, 255, 0.1);
  --color-footer-text: #FFFFFF;
  --color-footer-muted: #8E9AB8;

  /* Scrollbar */
  --scrollbar-track: #06091E;
  --scrollbar-thumb: rgba(0, 229, 255, 0.25);
  --scrollbar-thumb-hover: #00E5FF;
}

/* =========================================
   VARIABLES GLOBALES INVARIANTES
   ========================================= */
:root {
  /* Tipografía Corporativa */
  --font-heading: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Courier New", monospace;

  /* Escala tipográfica */
  --text-2xs: clamp(0.625rem, 0.58rem + 0.2vw, 0.6875rem);
  --text-xxs: var(--text-2xs);
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --text-3xl: clamp(2rem, 1.7rem + 1.2vw, 2.75rem);
  --text-4xl: clamp(2.5rem, 2rem + 2vw, 3.75rem);
  --text-5xl: clamp(3rem, 2.2rem + 3.2vw, 5rem);
  --text-huge: clamp(3.5rem, 2.5rem + 4.5vw, 6.5rem);

  /* Layout & Espaciados */
  --container-width: 1400px;
  --container-padding: clamp(1.25rem, 4vw, 3.5rem);
  
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6.5rem;
  --space-5xl: 9rem;

  /* Bordes & Radios */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 30px;
  --radius-full: 9999px;

  /* Transiciones & Motion */
  --transition-fast: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 350ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 900ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Jerarquía Z-Index */
  --z-bg: 0;
  --z-content: 10;
  --z-sticky: 50;
  --z-header: 100;
  --z-modal: 200;
  --z-toast: 300;
}