@font-face {
    font-family: 'Unispace';
    src: url('https://cdn.ohqcc.com/CDN/fonts/Unispace-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Teen';
    src: url('https://cdn.ohqcc.com/CDN/fonts/Teen-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Teen';
    src: url('https://cdn.ohqcc.com/CDN/fonts/Teen-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vibrocentric';
    src: url('https://cdn.ohqcc.com/CDN/fonts/Vibrocentric-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vibrocentric';
    src: url('https://cdn.ohqcc.com/CDN/fonts/Vibrocentric-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Paleta Cromática "Serene Executive" */
    --primary: #1B365D;          /* Azul Noche (Identidad) */
    --primary-light: #D1D7DF;    /* Tint primario */
    --primary-dark: #162B4A;     /* Shade / Hover primario */
    
    --secondary: #0D9488;        /* Teal Moderno (Apoyo) */
    --secondary-light: #CFEAE7;  /* Tint secundario */
    --secondary-dark: #0A766D;   /* Shade secundario */
    
    --neutral-dark: #0F172A;     /* Grafito Profundo (Texto principal) */
    --neutral-intermediate: #64748B; /* Gris Pizarra (Neutro intermedio) */
    --neutral-light: #F8FAFC;    /* Blanco Neblina (Fondo de lienzo) */
    
    --semantic-success: #10B981; /* Verde Esmeralda */
    --semantic-alert: #F59E0B;   /* Ámbar Sol */
    --semantic-error: #EF4444;   /* Rojo Carmín */
    --semantic-info: #3B82F6;    /* Azul Cielo */

    /* Variables de UI y Mapeo del Tema Principal */
    --bg-primary: var(--neutral-light);
    --bg-surface: #FFFFFF;
    --text-primary: var(--neutral-dark);
    --text-muted: var(--neutral-intermediate);
    --accent-gold: var(--primary);
    --accent-gold-hover: var(--primary-dark);
    --border-color: #CBD5E1;
    
    --font-title: 'Vibrocentric', sans-serif;
    --font-body: 'Teen', sans-serif;
    --font-code: 'Unispace', monospace;
    --max-w: 1200px;
}

[data-theme="light"] {
    --bg-primary: var(--neutral-light);
    --bg-surface: #FFFFFF;
    --text-primary: var(--neutral-dark);
    --text-muted: var(--neutral-intermediate);
    --border-color: #CBD5E1;
}

[data-theme="dark"] {
    --bg-primary: var(--neutral-dark);
    --bg-surface: #141414;
    --text-primary: var(--neutral-light);
    --text-muted: var(--neutral-intermediate);
    --accent-gold: var(--secondary);
    --accent-gold-hover: var(--secondary-light);
    --border-color: #27272A;
}