/**
 * VIRAXIS — Design Tokens
 * Sistema de diseño centralizado. Todo color, fuente, espaciado,
 * sombra o radio usado en el sitio se referencia desde aquí.
 */

:root {
    /* ===== Paleta de marca ===== */
    --color-primary: #12416D;
    --color-primary-rgb: 18, 65, 109;
    --color-secondary: #2D8598;
    --color-accent: #88C9B9;
    --color-cta: #F8AD2A;
    --color-cta-rgb: 248, 173, 42;
    --color-error: #DF252A;

    --color-primary-dark: #0D3354;
    --color-primary-light: #1B5A8F;
    --color-cta-dark: #DB9416;

    /* ===== Fondo y texto (modo claro) ===== */
    --color-bg: #F7F9FC;
    --color-bg-alt: #FFFFFF;
    --color-bg-elevated: #FFFFFF;
    --color-text: #1F2937;
    --color-text-muted: #5B6677;
    --color-text-soft: #8893A1;
    --color-text-on-primary: #F7F9FC;

    --color-border: #E3E8F0;
    --color-border-strong: #CBD5E1;

    --glass-bg: rgba(255, 255, 255, 0.6);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-blur: 16px;

    /* ===== Tipografía ===== */
    --font-display: 'Poppins', 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-utility: 'Manrope', sans-serif;

    --fs-xs: 0.8125rem;
    --fs-sm: 0.9375rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.375rem;
    --fs-xl: 1.75rem;
    --fs-2xl: 2.25rem;
    --fs-3xl: 2.875rem;
    --fs-4xl: 3.5rem;

    /* ===== Espaciado ===== */
    --space-section: clamp(64px, 9vw, 120px);
    --space-section-gap: clamp(20px, 3vw, 32px);
    --container-width: 1240px;
    --container-pad: clamp(20px, 5vw, 48px);

    /* ===== Bordes y sombras ===== */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    --shadow-sm: 0 2px 8px rgba(18, 65, 109, 0.06);
    --shadow-md: 0 8px 24px rgba(18, 65, 109, 0.08);
    --shadow-lg: 0 24px 48px rgba(18, 65, 109, 0.12);
    --shadow-cta: 0 12px 24px rgba(248, 173, 42, 0.28);

    /* ===== Movimiento ===== */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: 0.18s;
    --t-base: 0.32s;
    --t-slow: 0.6s;

    --header-height: 76px;
}

/* ===== Modo oscuro ===== */
html.dark-mode {
    --color-bg: #0B1B2B;
    --color-bg-alt: #0F2538;
    --color-bg-elevated: #112C42;
    --color-text: #EAF1F8;
    --color-text-muted: #AEC0D2;
    --color-text-soft: #7E94A8;

    --color-border: #1E3A52;
    --color-border-strong: #2B4D6B;

    --glass-bg: rgba(17, 44, 66, 0.55);
    --glass-border: rgba(255, 255, 255, 0.08);

    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 28px 56px rgba(0, 0, 0, 0.5);
}