:root {
    /* Colores base oficiales de Arditec */
    --color-negro: #000000;
    --color-gris-oscuro: #141414;
    --color-azul-oscuro: #10181A;
    --color-cafe: #2E2014;
    --color-gris: #414141;
    --color-azul: #063752;
    --color-celeste: #59A4C3;
    --color-celeste-claro: #C7EEFF;
    --color-verde: #266354;
    --color-turquesa: #45AD95;
    --color-verde-claro: #DCE7CC;
    --color-coral: #F03939;
    --color-naranja: #FF6E30;
    --color-mostaza: #F7AB18;
    --color-coral-claro: #F7CFCF;
    --color-cafe-claro: #D1BFAF;
    --color-gris-claro: #C8C8C8;
    --color-blanco-oscuro: #E5E6E7;
    --color-blanco-claro: #F5F5F5;
    --color-blanco: #FFFFFF;

    /* Roles de Color del Sistema */
    --primary: var(--color-azul);
    --primary-light: var(--color-celeste);
    --primary-dark: var(--color-azul-oscuro);
    
    --bg-light: var(--color-blanco-claro);
    --bg-dark: var(--color-azul-oscuro);
    --card-light: var(--color-blanco);
    --card-dark: var(--color-gris-oscuro);
    
    --text-dark: var(--color-azul-oscuro);
    --text-light: var(--color-blanco);
    --text-muted: var(--color-gris);
    
    --success: var(--color-verde);
    --success-light: var(--color-turquesa);
    --danger: var(--color-coral);
    --warning: var(--color-mostaza);
    --accent: var(--color-naranja);

    /* Fuentes y Tipografía */
    --font-primary: 'Roboto', system-ui, -apple-system, sans-serif;
    --font-title: 'KlavikaBD', sans-serif;
    --font-heading: 'KlavikaBD', sans-serif;
    
    /* Layout y Bordes */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
}