/*
 * JByte Design System - Enterprise Theme CSS v1.0.0
 * DNA Empresarial: Innovación Digital, Conectividad Global y Seguridad de Datos
 * Colors extracted from JByte identity:
 *   - Primary Blue / Seed: #29B6F6 (Cyan/Sky Blue - Globe vector)
 *   - Deep Navy Primary Dark: #0D47A1 / #003366 (Text and QR Code core)
 *
 * Copia de docs/jbyte.css tal cual — es la única fuente de la paleta de
 * marca. nova.css la usa (con var(--color-*, <fallback>)) como base de
 * los dos temas del sitio (claro y oscuro); no se recalculan colores
 * nuevos ahí, solo se combinan los que ya están definidos aquí.
 */

:root {
    /* ==========================================
   * 1. SEED & BRAND PALETTE (Base Colors)
   * ========================================== */
    --color-brand-primary-light: #29B6F6;
    /* Bright Sky Blue (Globe) */
    --color-brand-primary: #0288D1;
    /* Deep Sky Blue (Brand Accent) */
    --color-brand-primary-dark: #003366;
    /* Tech Navy / Dark Blue (Typography/QR) */

    /* ==========================================
   * 2. COMPLEMENTARY PALETTE (Contrast & Action)
   * ========================================== */
    --color-brand-complementary: #F66929;
    /* Coral Orange (Direct Opposite) */
    --color-brand-complementary-light: #FF8A50;
    /* Soft Coral */
    --color-brand-complementary-dark: #C43E00;
    /* Deep Rust Orange */

    /* ==========================================
   * 3. TRIADIC PALETTE (Data Viz & Accents)
   * ========================================== */
    --color-triad-green: #29F6B6;
    /* Mint Emerald */
    --color-triad-purple: #B629F6;
    /* Tech Purple / Magenta */

    /* ==========================================
   * 4. TETRADIC PALETTE (Multi-axis Data Viz)
   * ========================================== */
    --color-tetrad-1: #29B6F6;
    /* Brand Cyan */
    --color-tetrad-2: #F629B6;
    /* Hot Pink Accent */
    --color-tetrad-3: #F6F629;
    /* Neon Gold Accent */
    --color-tetrad-4: #29F669;
    /* Bright Lime */

    /* ==========================================
   * 5. NEUTRALS SCALE (8-10 Shade Luminance)
   * ========================================== */
    --color-neutral-50: #F8FAFC;
    /* Canvas Light */
    --color-neutral-100: #F1F5F9;
    /* Surface Neutral */
    --color-neutral-200: #E2E8F0;
    /* Border Light */
    --color-neutral-300: #CBD5E1;
    /* Border Muted */
    --color-neutral-400: #94A3B8;
    /* Text Subtitle */
    --color-neutral-500: #64748B;
    /* Text Muted */
    --color-neutral-600: #475569;
    /* Text Secondary */
    --color-neutral-700: #334155;
    /* Text Primary Dark */
    --color-neutral-800: #1E293B;
    /* Surface Dark */
    --color-neutral-900: #0F172A;
    /* Canvas Dark */

    /* ==========================================
   * 6. SEMANTIC COLORS (WCAG Compliant)
   * ========================================== */
    --color-semantic-success: #059669;
    /* Emerald Green */
    --color-semantic-warning: #D97706;
    /* Amber Warning */
    --color-semantic-danger: #DC2626;
    /* Crimson Red */
    --color-semantic-info: #0288D1;
    /* Info Cyan Blue */

    /* ==========================================
   * 7. GRADIENTS (Cohesive Brand Mesh)
   * ========================================== */
    --gradient-primary: linear-gradient(135deg, #29B6F6 0%, #003366 100%);
    --gradient-accent: linear-gradient(135deg, #29B6F6 0%, #F66929 100%);
    --gradient-tech: linear-gradient(180deg, #0F172A 0%, #003366 100%);
    --gradient-radial-glow: radial-gradient(circle at center, rgba(41, 182, 246, 0.15) 0%, transparent 70%);

    /* ==========================================
   * 8. ELEVATION & SHADOWS (Soft UI)
   * ========================================== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 51, 102, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 51, 102, 0.1), 0 2px 4px -1px rgba(0, 51, 102, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 51, 102, 0.1), 0 4px 6px -2px rgba(0, 51, 102, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 51, 102, 0.12), 0 10px 10px -5px rgba(0, 51, 102, 0.04);

    /* ==========================================
   * 9. SPACING SYSTEM (8pt Grid Standard)
   * ========================================== */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;
}

/* ==================================================================
 * TEMA DEL SITIO — claro (default) y oscuro — construido sobre la
 * paleta de arriba. jbyte.css es la hoja principal: aquí se decide de
 * qué color es cada cosa; nova.css (que se carga después) solo aplica
 * esos tokens a cada componente (nav, botones, tarjetas, etc.), no
 * define colores propios.
 *
 * Reglas de color ÚNICAS para todo el sitio (las mismas en cada
 * página, para que no haya páginas con párrafo azul y otras con
 * párrafo naranja):
 *   - Párrafo normal / texto secundario -> --paper (= --color-brand-primary)
 *   - Texto resaltado (encabezados, "Quiénes somos", eyebrows, precios)
 *     -> --highlight (= --color-brand-primary-dark)
 *   - Botones RELLENOS -> --color-brand-complementary
 *
 * --pulse sigue existiendo aparte: es el azul eléctrico que se usa como
 * ACENTO de fondo/borde/glow (bandas de color, badges, focos de hover
 * en el nav/footer que se quedan oscuros siempre) — no es texto, así
 * que no cambia con esta corrección de "texto resaltado".
 * ================================================================== */
:root {
  --pulse: var(--color-brand-primary-light);
  /* azul eléctrico — acento de fondo/borde/glow, no texto */
  --pulse-glow: rgba(41, 182, 246, 0.4);
  --highlight: var(--color-brand-primary-dark);
  /* texto resaltado: encabezados, precios, eyebrows... */
  --current: var(--color-brand-primary);
  --on-accent: var(--color-brand-primary-dark);
  /* texto legible sobre --pulse o sobre un botón relleno */
  --fill: var(--color-brand-complementary);
  /* botones rellenos */
  --fill-hover: var(--color-brand-complementary-dark);
  --fill-glow: rgba(246, 105, 41, 0.4);
  --chrome-text: var(--color-neutral-50);
  /* texto sobre el nav/footer, siempre oscuros */
  --chrome-muted: var(--color-neutral-300);
  --chrome-edge: 1px solid rgba(248, 250, 252, 0.14);

  /* Tema CLARO (default): fondo blanco, párrafo en el azul del
     logotipo. --frost ya no es un color aparte: es un alias de --paper
     (varios selectores viejos de nova.css todavía lo usan para texto
     secundario/muted). */
  --void: #ffffff;
  --abyss: var(--color-neutral-50);
  /* paneles/tarjetas */
  --paper: var(--color-brand-primary);
  /* texto principal Y secundario: azul del logotipo */
  --frost: var(--paper);
  --surface: rgba(2, 136, 209, 0.05);
  --surface-card: rgba(2, 136, 209, 0.04);
  --edge: 1px solid rgba(2, 136, 209, 0.15);
  --edge-hover: 1px solid rgba(41, 182, 246, 0.55);

  --font-display: 'Chakra Petch', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', monospace;

  /* Bootstrap Color Overrides */
  --bs-body-bg: var(--void);
  --bs-body-color: var(--paper);
  --bs-primary: var(--pulse);
  --bs-success: var(--pulse);
  --bs-dark: var(--abyss);
}

/* Tema OSCURO — se activa con data-theme="dark" en <html> (ver
   jbyte-theme.js). Misma paleta de marca, combinada oscura: fondo y
   paneles en los tonos profundos de arriba, texto casi blanco. */
:root[data-theme="dark"] {
  --void: var(--color-neutral-900);
  --abyss: var(--color-brand-primary-dark);
  --paper: var(--color-neutral-50);
  --frost: var(--paper);
  --surface: rgba(0, 51, 102, 0.65);
  --surface-card: rgba(203, 213, 225, 0.04);
  --edge: 1px solid rgba(203, 213, 225, 0.14);
  --edge-hover: 1px solid rgba(41, 182, 246, 0.55);
}

/* ==========================================
 * UTILITY CLASSES (Tailwind & Bootstrap compatible)
 * ========================================== */

/* Backgrounds */
.bg-brand-primary {
    background-color: var(--color-brand-primary) !important;
}

.bg-brand-primary-light {
    background-color: var(--color-brand-primary-light) !important;
}

.bg-brand-primary-dark {
    background-color: var(--color-brand-primary-dark) !important;
}

.bg-brand-accent {
    background-color: var(--color-brand-complementary) !important;
}

/* Text Colors */
.text-brand-primary {
    color: var(--color-brand-primary) !important;
}

.text-brand-primary-light {
    color: var(--color-brand-primary-light) !important;
}

.text-brand-primary-dark {
    color: var(--color-brand-primary-dark) !important;
}

.text-brand-accent {
    color: var(--color-brand-complementary) !important;
}

/* Borders */
.border-brand-primary {
    border-color: var(--color-brand-primary) !important;
}

.border-brand-dark {
    border-color: var(--color-brand-primary-dark) !important;
}

/* Gradients */
.bg-gradient-primary {
    background: var(--gradient-primary) !important;
}

.bg-gradient-accent {
    background: var(--gradient-accent) !important;
}

.bg-gradient-tech {
    background: var(--gradient-tech) !important;
}

/* Shadows */
.shadow-soft-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-soft-md {
    box-shadow: var(--shadow-md);
}

.shadow-soft-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-soft-xl {
    box-shadow: var(--shadow-xl);
}