/* ===================================================================== assets/css/tokens.css (B5.1, D30/D34/D35) Solo custom properties y selectores de tema. Las reglas de elementos (body, :focus-visible, h1…) que consumen estos tokens no viven aquí todavía: van en app.css/site.css cuando se escriban esos componentes (Fase 5 más adelante), fuente: docs/refactor/PLAN.md 3.1.5. Convención: --*-rgb = canales "R G B" → rgb(var(--x-rgb) / α). Orden de carga: tokens.css → fonts.css (B5.5) → app.css | site.css. ===================================================================== */ :root { color-scheme: dark; /* 1. Primitivas de marca (solo se referencian en este archivo) */ --color-azul-noche-rgb: 18 27 48; /* #121B30 */ --color-blanco-hielo-rgb: 241 243 250; /* #F1F3FA */ --color-verde-menta-rgb: 11 220 178; /* #0BDCB2 */ --color-azul-celeste-rgb: 68 175 228; /* #44AFE4 */ --color-dorado-rgb: 220 185 85; /* #DCB955 */ /* Secundarios (D34, aprobados y definitivos) */ --color-lavanda-rgb: 167 139 250; /* #A78BFA */ --color-coral-rgb: 255 138 112; /* #FF8A70 */ --color-rosa-rgb: 244 114 182; /* #F472B6 */ /* 2. Asignación por línea: único lugar donde se cambia un color de línea. hover = principal + 18 % Hielo; active = principal + 12 % Noche. Precalculados: si cambia un PRINCIPAL hay que recalcularlos. Los secundarios no tienen hover sólido. */ --auditors-accent-rgb: var(--color-verde-menta-rgb); --auditors-accent-hover-rgb: 52 224 191; /* #34E0BF */ --auditors-accent-active-rgb: 12 197 162; /* #0CC5A2 */ --auditors-accent-2-rgb: var(--color-lavanda-rgb); --financial-accent-rgb: var(--color-azul-celeste-rgb); --financial-accent-hover-rgb: 99 187 232; /* #63BBE8 */ --financial-accent-active-rgb: 62 157 206; /* #3E9DCE */ --financial-accent-2-rgb: var(--color-coral-rgb); --commercium-accent-rgb: var(--color-dorado-rgb); --commercium-accent-hover-rgb: 224 195 115; /* #E0C373 */ --commercium-accent-active-rgb: 196 166 81; /* #C4A651 */ --commercium-accent-2-rgb: var(--color-rosa-rgb); --accent-auditors: rgb(var(--auditors-accent-rgb)); --accent-financial: rgb(var(--financial-accent-rgb)); --accent-commercium: rgb(var(--commercium-accent-rgb)); /* 3. Superficies (derivadas del Azul Noche; D35) */ --surface-sunken-rgb: 13 19 34; /* #0D1322 Noche + 30 % negro: footer, terminal, inputs */ --surface-base-rgb: var(--color-azul-noche-rgb); /* #121B30 fondo de página */ --surface-raised-rgb: 31 40 60; /* #1F283C Noche + 6 % Hielo: tarjetas y paneles */ --surface-overlay-rgb: 40 49 68; /* #283144 Noche + 10 % Hielo: menú móvil, modal */ --surface-light-rgb: var(--color-blanco-hielo-rgb); /* superficie clara puntual */ --surface-glass: rgb(var(--surface-base-rgb) / .85); /* sin backdrop-filter se ve como base */ --surface-scrim: rgb(var(--surface-sunken-rgb) / .72); /* 4. Texto */ --text-primary-rgb: var(--color-blanco-hielo-rgb); /* #F1F3FA */ --text-secondary-rgb: 196 200 210; /* #C4C8D2 Hielo 80 % */ --text-muted-rgb: 163 167 179; /* #A3A7B3 Hielo 65 % */ --text-disabled-rgb: 107 113 129; /* #6B7181 Hielo 40 %: solo controles inactivos */ --text-on-light-rgb: var(--color-azul-noche-rgb); /* 5. Bordes */ --border-subtle-rgb: 49 57 76; /* #31394C decorativo, nunca delimita un control */ --border-strong-rgb: 118 124 139; /* #767C8B controles: >= 3:1 en las 4 superficies */ /* 6. Estados RESERVADOS: nunca marca, CTA, serie de gráfica ni marketing */ --status-error-rgb: 255 100 116; /* #FF6474 */ --status-warning-rgb: 255 228 92; /* #FFE45C */ --status-success-rgb: 143 224 79; /* #8FE04F */ --status-info-rgb: 157 184 255; /* #9DB8FF */ /* 7. Intensidad de tintes (regla 3.2.5) */ --tint-base: .12; /* tope sobre base y sunken */ --tint-raised: .10; /* tope sobre raised */ --tint-hover: .08; /* 8. Semánticos: valores por defecto = holding (D35) */ --accent-rgb: var(--color-blanco-hielo-rgb); --accent-hover-rgb: 219 221 230; /* #DBDDE6 Hielo + 10 % Noche */ --accent-active-rgb: 201 204 214; /* #C9CCD6 Hielo + 18 % Noche */ --accent-contrast-rgb: var(--color-azul-noche-rgb); /* --accent-2-rgb NO se define en :root: holding y data-division usan el fallback */ --accent-2-contrast-rgb: var(--color-azul-noche-rgb); --focus-ring: rgb(var(--color-blanco-hielo-rgb)); --focus-ring-inner: rgb(var(--color-azul-noche-rgb)); /* 9. Forma y movimiento (sin regla global de movimiento reducido: C7) */ --radius-control: 6px; --radius-card: 12px; --radius-pill: 999px; --dur-fast: 150ms; --dur-base: 200ms; --ease-standard: cubic-bezier(.2, 0, 0, 1); /* 10. Tipografía (B5.5, D31/D32/D33): familias y escala fluida, 360→1280 px */ --font-heading: "Oswald", "Titulos Fallback", "Arial Narrow", sans-serif; --font-body: "IBM Plex Sans Condensed", "Cuerpo Fallback", "Arial Narrow", Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace; --fw-heading: 700; --fw-heading-medium: 500; --fw-body: 400; --fw-thin: 100; --fw-strong: 600; /* D32 = sí */ --fs-display: clamp(2.75rem, 1.9674rem + 3.4783vw, 4.75rem); /* 44→76 px, solo hero */ --fs-h1: clamp(2.25rem, 1.663rem + 2.6087vw, 3.75rem); /* 36→60 */ --fs-h2: clamp(1.875rem, 1.5326rem + 1.5217vw, 2.75rem); /* 30→44 */ --fs-h3: clamp(1.5rem, 1.3043rem + 0.8696vw, 2rem); /* 24→32 */ --fs-h4: clamp(1.25rem, 1.1522rem + 0.4348vw, 1.5rem); /* 20→24 */ --fs-lead: clamp(1.125rem, 1.0516rem + 0.3261vw, 1.3125rem); /* 18→21 */ --fs-body: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem); /* 16→18 */ --fs-sm: 0.875rem; /* 14 px: mínimo para texto corrido, leyenda legal y copyright */ --fs-xs: 0.8125rem; /* 13 px: solo overline o badge en Oswald 500 en mayúsculas */ --lh-display: 1.05; --lh-heading: 1.15; --lh-snug: 1.3; --lh-body: 1.6; --tracking-heading: 0.005em; /* Oswald ya es apretada: sin tracking negativo */ --tracking-button: 0.01em; --tracking-overline: 0.08em; --measure: 68ch; } /* ---- Tema por línea: (C4) ---- */ [data-linea="auditors"] { --accent-rgb: var(--auditors-accent-rgb); --accent-hover-rgb: var(--auditors-accent-hover-rgb); --accent-active-rgb: var(--auditors-accent-active-rgb); --accent-2-rgb: var(--auditors-accent-2-rgb); } [data-linea="financial"] { --accent-rgb: var(--financial-accent-rgb); --accent-hover-rgb: var(--financial-accent-hover-rgb); --accent-active-rgb: var(--financial-accent-active-rgb); --accent-2-rgb: var(--financial-accent-2-rgb); } [data-linea="commercium"] { --accent-rgb: var(--commercium-accent-rgb); --accent-hover-rgb: var(--commercium-accent-hover-rgb); --accent-active-rgb: var(--commercium-accent-active-rgb); --accent-2-rgb: var(--commercium-accent-2-rgb); } /* ---- data-division="…" en un contenedor: SOLO el principal ---- */ [data-division="auditors"] { --accent-rgb: var(--auditors-accent-rgb); --accent-hover-rgb: var(--auditors-accent-hover-rgb); --accent-active-rgb: var(--auditors-accent-active-rgb); } [data-division="financial"] { --accent-rgb: var(--financial-accent-rgb); --accent-hover-rgb: var(--financial-accent-hover-rgb); --accent-active-rgb: var(--financial-accent-active-rgb); } [data-division="commercium"] { --accent-rgb: var(--commercium-accent-rgb); --accent-hover-rgb: var(--commercium-accent-hover-rgb); --accent-active-rgb: var(--commercium-accent-active-rgb); } /* "initial" = valor inválido garantizado → var(--accent-2-rgb, X) usa X (Hielo) */ [data-linea="holding"], [data-division] { --accent-2-rgb: initial; } /* ---- Derivados: se REDECLARAN en cada nodo que cambia de tema ---- Una custom property resuelve sus var() en el elemento donde se declara y hereda el valor ya resuelto. Si solo se declarara en :root, --accent y --shadow-glow seguirían siendo Hielo dentro de data-linea="auditors". */ :root, [data-linea], [data-division] { --accent: rgb(var(--accent-rgb)); --accent-2: rgb(var(--accent-2-rgb, var(--text-primary-rgb))); --accent-hover: rgb(var(--accent-hover-rgb)); /* B7.1: .btn--primary lo consume por línea/división */ --accent-active: rgb(var(--accent-active-rgb)); --shadow-glow: 0 8px 24px -8px rgb(var(--accent-rgb) / .45); --text-gradient: linear-gradient(90deg, rgb(var(--accent-rgb)), rgb(var(--text-primary-rgb))); } /* Va DESPUÉS de la regla anterior (misma especificidad 0,1,0) */ [data-linea="holding"] { --text-gradient: linear-gradient(90deg, var(--accent-auditors), var(--accent-financial), var(--accent-commercium)); }