/**
 * @file: variables.css
 * @description: Design System Tokens & Custom Properties (Theming)
 * @author: MS-KIT v1.0
 * 
 * INSTRUCCIONES:
 * Cambia los valores en :root para adaptar la identidad visual del cliente.
 * El resto del sitio heredará automáticamente estos valores.
 */

:root {
  /* =========================================
     1. PALETA DE COLORES (BRAND)
     ========================================= */

  /* Color Principal (Botones, Enlaces, Elementos destacados) */
  /* Deep Core Navy - Elegancia y sofisticación */
  --color-primary: #0a192f;
  --color-primary-light: #112240;
  --color-primary-dark: #020c1b;

  /* Color Secundario (Acentos, Detalles UI) */
  /* Deep Core Navy más oscuro */
  --color-secondary: #0b1523;
  --color-secondary-light: #172a45;
  --color-secondary-dark: #01050a;

  /* Color de Acento (Call to Actions fuertes) */
  /* Electric Cyan - Energía y modernidad */
  --color-accent: #00e0ff;
  --color-accent-hover: #00b8d4;

  /* =========================================
     2. COLORES NEUTROS Y TEXTO
     ========================================= */

  --color-white: #ffffff;
  --color-black: #111827;

  /* Fondos - Dark Mode */
  --color-bg-body: #0b1523;
  /* Deep Core Navy más oscuro */
  --color-bg-surface: #0a192f;
  /* Deep Core Navy */
  --color-bg-alt: #112240;
  /* Primary light para contrastes sutiles */

  /* Texto - Optimizado para Dark Mode */
  --color-text-main: rgb(255 255 255 / 0.8);
  /* Off-white for readability on dark */
  --color-text-muted: #a1abc9;
  /* Gris azulado suave */
  --color-text-light: #64ffda;
  /* Cyan suave para acentos */
  --color-text-inverted: #0a192f;
  /* Navy para texto sobre fondos claros */

  /* Bordes */
  --color-border: #172a45;
  /* Border suave para modo oscuro */

  /* Estados Semánticos */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* =========================================
     3. TIPOGRAFÍA
     ========================================= */

  /* Headings: Moderna y geométrica para títulos */
  --font-heading: "Poppins", sans-serif;

  /* Body: Legible y neutra para lectura */
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* =========================================
     4. ESPACIADO Y LAYOUT (8pt Grid System)
     ========================================= */

  /* Spacing System */
  --space-xs: 0.5rem;
  /* 8px */
  --space-sm: 1rem;
  /* 16px */
  --space-md: 2rem;
  /* 32px */
  --space-lg: 4rem;
  /* 64px */
  --space-xl: 8rem;
  /* 128px */

  /* Legacy spacing (mantener compatibilidad) */
  --spacing-section: 100px;
  /* Separación amplia entre secciones para estética premium */
  --spacing-container: 1280px;
  --header-height: 80px;

  /* Border Radius */
  --border-radius: 2rem;
  /* Technical look */
  --radius-sm: 0.375rem;
  /* 6px */
  --radius-md: 0.5rem;
  /* 8px */
  --radius-lg: 1rem;
  /* 16px */
  --radius-xl: 1.5rem;
  /* 24px */

  /* Container */
  --container-width: 1200px;

  /* =========================================
     5. SHADOWS (Efecto Elevación Premium)
     ========================================= */

  /* Sutil: Para elementos estáticos o cards simples */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

  /* Elevación Media: Para Cards de servicios */
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);

  /* Elevación Alta: Para Hover effects (Floating) */
  --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Glow suave del color primario (Opcional) */
  --shadow-glow: 0 0 15px rgba(236, 72, 153, 0.3);
  /* Glow con accent color Electric Pink */

  /* Transiciones Estándar */
  --transition-fast: 0.2s ease;
  --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =========================================
   6. DARK MODE SUPPORT
   ========================================= */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-body: #0b1523;
    /* Deep Core Navy más oscuro */
    --color-bg-surface: #0a192f;
    /* Deep Core Navy */
    --color-bg-alt: #112240;
    /* Primary light */

    --color-text-main: rgb(255 255 255 / 0.8);
    /* Blanco suave */
    --color-text-muted: #8892b0;
    /* Gris azulado suave */
    --color-text-light: #64ffda;
    /* Cyan suave */

    --color-border: #172a45;
    /* Border suave */

    /* Suavizar sombras en oscuro para que no se vean "sucias" */
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
  }
}

/* Clase manual para forzar dark mode si se necesita toggle */
[data-theme="dark"] {
  --color-bg-body: #0b1523;
  --color-bg-surface: #0a192f;
  --color-bg-alt: #112240;
  --color-text-main: rgb(255 255 255 / 0.8);
  --color-text-muted: #8892b0;
  --color-text-light: #64ffda;
  --color-border: #172a45;
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
}