/* Design tokens semánticos. Tema claro por defecto; oscuro por preferencia del sistema o por elección explícita (data-tema en ). Los componentes SOLO usan estos tokens. */ :root { color-scheme: light; /* Superficies */ --sup-fondo: #f4f5f7; --sup-panel: #ffffff; --sup-elevada: #ffffff; --sup-hundida: #eef0f3; /* Marca Vértice Consultores: Azul Marino Profundo (primario) + Dorado/Mostaza (acento) */ --marca-marino: #0b1f3a; --marca-marino-2: #132c52; --marca-dorado: #c9a227; --marca-dorado-suave: #f6eed3; --marca-dorado-texto: #7a5f0c; --sup-barra: var(--marca-marino); --sup-barra-texto: #e6ebf2; --sup-barra-tenue: #9fb0c8; --sup-lateral: #ffffff; /* Texto */ --txt: #172033; --txt-2: #4a5568; --txt-3: #6b7689; --txt-invertido: #ffffff; /* Bordes */ --borde: #dfe3e9; --borde-fuerte: #c5ccd6; /* Marca / acción */ --acento: var(--marca-marino-2); --acento-hover: var(--marca-marino); --acento-suave: #e6ecf5; --acento-texto: #173766; --foco: var(--marca-dorado); /* Celdas del tablero de cumplimiento (semáforo) */ --celda-gris: #e7eaef; /* Estados (semáforo) */ --ok: #1e7a4c; --ok-suave: #e6f4ec; --aviso: #9a5b00; --aviso-suave: #fff4e0; --riesgo: #b3261e; --riesgo-suave: #fdecea; --info: #1f4e79; --info-suave: #e7eef6; /* Tipografía */ --fuente: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --fuente-mono: "JetBrains Mono", "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace; --t-xs: 11px; --t-sm: 12.5px; --t-md: 14px; --t-lg: 16px; --t-xl: 20px; --t-2xl: 24px; /* Espaciado, radios, sombras */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --sombra-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08); --sombra-2: 0 8px 24px rgba(16, 24, 40, .14); /* Layout */ --alto-topbar: 56px; --ancho-lateral: 272px; --ancho-lateral-compacto: 64px; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { color-scheme: dark; --sup-fondo: #0d1117; --sup-panel: #151b24; --sup-elevada: #1b2330; --sup-hundida: #10151d; --sup-barra: #07162b; --sup-barra-texto: #dbe2ec; --sup-barra-tenue: #8391a5; --sup-lateral: #121821; --txt: #e3e8ef; --txt-2: #b3bdcb; --txt-3: #8b97a8; --txt-invertido: #0d1117; --borde: #263041; --borde-fuerte: #34405a; --acento: #5b8fd0; --acento-hover: #7aa7de; --acento-suave: #172742; --acento-texto: #9bbfe9; --foco: #d9b544; --marca-dorado: #d9b544; --marca-dorado-suave: #2f2812; --marca-dorado-texto: #e8cb6b; --celda-gris: #222b39; --ok: #4cc38a; --ok-suave: #12291e; --aviso: #e2a53d; --aviso-suave: #2e2414; --riesgo: #f07167; --riesgo-suave: #33181a; --info: #7cb0e3; --info-suave: #1a2a3e; --sombra-1: 0 1px 2px rgba(0, 0, 0, .4); --sombra-2: 0 8px 24px rgba(0, 0, 0, .5); } } :root[data-tema="oscuro"] { color-scheme: dark; --sup-fondo: #0d1117; --sup-panel: #151b24; --sup-elevada: #1b2330; --sup-hundida: #10151d; --sup-barra: #07162b; --sup-barra-texto: #dbe2ec; --sup-barra-tenue: #8391a5; --sup-lateral: #121821; --txt: #e3e8ef; --txt-2: #b3bdcb; --txt-3: #8b97a8; --txt-invertido: #0d1117; --borde: #263041; --borde-fuerte: #34405a; --acento: #5b8fd0; --acento-hover: #7aa7de; --acento-suave: #172742; --acento-texto: #9bbfe9; --foco: #d9b544; --marca-dorado: #d9b544; --marca-dorado-suave: #2f2812; --marca-dorado-texto: #e8cb6b; --celda-gris: #222b39; --ok: #4cc38a; --ok-suave: #12291e; --aviso: #e2a53d; --aviso-suave: #2e2414; --riesgo: #f07167; --riesgo-suave: #33181a; --info: #7cb0e3; --info-suave: #1a2a3e; --sombra-1: 0 1px 2px rgba(0, 0, 0, .4); --sombra-2: 0 8px 24px rgba(0, 0, 0, .5); }