/* ───────────────────────────────────────────────────────────── Color tokens — GME design system Spec: 05-redesign/design-system/foundation/color.md ───────────────────────────────────────────────────────────── Refactor 2026-05-22 (D13-D22): paleta consolidada a 7 colors con framework de naming en 3 capas. Stone e Ink eliminados como anchors brand standalone (absorbed en vellum-400 / slate-900). Framework de naming en 3 capas: - Capa A — Anchors brand (7 colors, nombres simples sin sufijo) - Capa B — Escala tonal (Tailwind-style; vellum/slate 5 steps, brand y functional 8 steps cada uno) - Capa C — Semantic role (cascade-aware, la API canónica) Cascadas: - Vellum (default :root): warm light + cool dark text (D18 cross) - Slate ([data-surface="immersive"], o el atributo legacy "slate"): cool dark + warm light text - Tinted (warm/cool/mineral): only --surface-default override Construcción cromática: - Tonal scales en OKLCH (perceptualmente uniforme) - Anchors a L natural — no forzados a step 500 - Chroma tapered: bajo en extremos, peak en anchor - Modos: solo light. Slate es surface, no mode. Aliases deprecated mantenidos al final para retro-compat mientras los consumers legacy migran. ───────────────────────────────────────────────────────────── */ :root { /* ════════════════════════════════════════════════════════════ CAPA A — Anchors brand (7 colors) ════════════════════════════════════════════════════════════ Nombres simples sin sufijo. La API legible cuando el código habla del color por identidad. Cada anchor es alias del step canónico de su escala tonal. Use case: brand identity scoped (logo iso, hero engines, brand graphics) donde la identidad ES el valor. ──────────────────────────────────────────────────────────── */ /* Neutrals (2 families asimétricas — D13) */ --vellum: #ECE7DF; /* = vellum-100 · warm light */ --slate: oklch(0.21 0.012 220); /* = slate-900 · cool dark */ /* Brand (5 colors) */ --teal: #2D4A5A; /* = teal-700 */ --contour: #4A6A5A; /* = contour-600 */ --beacon: #B56A3A; /* = beacon-500 */ --ochre: #C49931; /* = ochre-400 */ --plum: #714F72; /* = plum-600 */ /* Slate beacon — warm shift sobre slate (ortogonal al teal lineage). Sirve a --accent-active en slate cascade. Token brand puntual, no parte de tonal scale. */ --slate-beacon: #D6764A; /* ════════════════════════════════════════════════════════════ CAPA B — Escala tonal (Tailwind-style 100-800/900) ════════════════════════════════════════════════════════════ Convención uniforme cross-familia: número creciente = L decreciente. Use case: data viz, hero visual language, o excepciones declaradas con justificación en spec. Construcción OKLCH (aproximados — calibrar con converter al implementar para que anchor matchee el hex exacto). ──────────────────────────────────────────────────────────── */ /* ── Vellum scale — paleta de luz (warm, H≈70-75) — 5 steps (D15) Cubre el rango lights → mid-light. NO tiene step 500-900 — el rango mid-dark → dark lo cubre slate. */ --vellum-50: oklch(0.96 0.006 70); /* slot 1 · surface elevated (vellum cascade) */ --vellum-100: var(--vellum); /* slot 2 · surface default · "el papel" */ --vellum-200: #E2DCD0; /* slot 3 · surface sunken */ --vellum-300: oklch(0.84 0.018 75); /* slot 4 · border default */ --vellum-400: #B8B0A0; /* slot 5 · text muted on slate · absorbed --stone (D14) */ /* ── Slate scale — paleta oscura (cool teal lineage, H=220) — 5 steps (D15) Cubre el rango mid-dark → darkest. NO tiene step 50-500 — el rango light → mid lo cubre vellum. Recalibrado 2026-05-20 a H=220 (teal lineage). Antes la escala estaba en H=197 (cyan-teal) con rules en H=155 (sage green) — inconsistencia interna corregida. */ --slate-600: oklch(0.42 0.022 220); /* slot 5 · text muted on vellum */ --slate-700: oklch(0.32 0.020 220); /* slot 4 · border default (slate cascade) */ --slate-800: oklch(0.27 0.014 220); /* slot 3 · surface elevated (slate cascade) */ --slate-900: oklch(0.21 0.012 220); /* slot 2 · surface default = anchor --slate · absorbed --ink (D14) */ --slate-950: oklch(0.17 0.012 220); /* slot 1 · surface sunken (slate cascade) */ /* ── Brand tonal scales — 5 colors × 8 steps (100-800) — D16 Steps 50 y 900 eliminados: a esas luminances los colores brand pierden identidad cromática (leen "casi-blanco con tint" / "casi-negro con tint"). Los extremos los cubren vellum-50 y slate-950. Las 5 brand families están pobladas completas para evitar inventar paletas paralelas (ver ADR 0009). */ /* TEAL (anchor: teal-700, H=220) */ --teal-100: oklch(0.94 0.012 220); --teal-200: oklch(0.88 0.020 220); --teal-300: oklch(0.78 0.030 220); --teal-400: oklch(0.66 0.040 220); --teal-500: oklch(0.55 0.045 220); /* data-cat-1, focus-ring, accent en slate */ --teal-600: oklch(0.45 0.045 220); --teal-700: var(--teal); /* #2D4A5A brand · accent default (vellum cascade) */ --teal-800: oklch(0.27 0.038 220); /* accent-pressed */ /* BEACON (anchor: beacon-500, H=47) */ --beacon-100: oklch(0.93 0.030 47); --beacon-200: oklch(0.86 0.060 47); --beacon-300: oklch(0.78 0.090 47); /* data-div-neg-1 */ --beacon-400: oklch(0.69 0.110 47); --beacon-500: var(--beacon); /* #B56A3A brand · NOW marker, accent-active */ --beacon-600: oklch(0.50 0.115 47); --beacon-700: oklch(0.41 0.105 47); /* data-div-neg-2, beacon emphasis */ --beacon-800: oklch(0.31 0.085 47); /* CONTOUR (anchor: contour-600, H=158) */ --contour-100: oklch(0.93 0.012 158); /* surface mineral (tint sage) */ --contour-200: oklch(0.86 0.022 158); --contour-300: oklch(0.76 0.030 158); /* data-div-pos-1 */ --contour-400: oklch(0.65 0.038 158); /* logo iso en slate */ --contour-500: oklch(0.55 0.040 158); --contour-600: var(--contour); /* #4A6A5A brand · logo mark, atmosphere, data-cat-4 */ --contour-700: oklch(0.35 0.035 158); /* data-div-pos-2 */ --contour-800: oklch(0.26 0.030 158); /* OCHRE (anchor: ochre-400, H=80) */ --ochre-100: oklch(0.94 0.034 80); /* surface warm (tint amber) */ --ochre-200: oklch(0.88 0.066 80); --ochre-300: oklch(0.79 0.100 80); --ochre-400: var(--ochre); /* #C49931 brand · data-cat-3, pillar Social */ --ochre-500: oklch(0.59 0.135 80); --ochre-600: oklch(0.49 0.130 80); --ochre-700: oklch(0.39 0.115 80); --ochre-800: oklch(0.29 0.090 80); /* PLUM (anchor: plum-600, H=322) */ --plum-100: oklch(0.93 0.020 322); /* surface cool (tint mauve) */ --plum-200: oklch(0.85 0.035 322); --plum-300: oklch(0.76 0.050 322); --plum-400: oklch(0.65 0.060 322); --plum-500: oklch(0.55 0.065 322); /* plum lift en slate */ --plum-600: var(--plum); /* #714F72 brand · data-cat-5, pillar Governance */ --plum-700: oklch(0.35 0.055 322); --plum-800: oklch(0.26 0.045 322); /* ── Functional scales — 4 families × 8 steps (D19) Mismo patrón que brand: anchor en step 500 (L natural), chroma tapered, 100-800. Calibrados a familia tonal — no defaults vibrantes. */ /* SUCCESS (muted green, H=155) */ --success-100: oklch(0.94 0.025 155); /* surface success */ --success-200: oklch(0.86 0.050 155); --success-300: oklch(0.76 0.070 155); --success-400: oklch(0.64 0.080 155); --success-500: oklch(0.52 0.085 155); /* ← anchor · border, icon, data-status-success */ --success-600: oklch(0.42 0.080 155); --success-700: oklch(0.33 0.070 155); /* text-success */ --success-800: oklch(0.25 0.055 155); /* WARNING (muted amber, H=65 — distinto de beacon H=47, ochre H=80) Caution NO es family separada — se maneja con warning-300/-400. */ --warning-100: oklch(0.95 0.035 65); --warning-200: oklch(0.88 0.070 65); --warning-300: oklch(0.79 0.095 65); --warning-400: oklch(0.70 0.115 65); --warning-500: oklch(0.62 0.125 65); /* ← anchor */ --warning-600: oklch(0.52 0.115 65); --warning-700: oklch(0.42 0.100 65); /* text-warning */ --warning-800: oklch(0.32 0.075 65); /* ERROR (muted red, H=28 — no bright stoplight) */ --error-100: oklch(0.94 0.030 28); --error-200: oklch(0.86 0.065 28); --error-300: oklch(0.76 0.095 28); --error-400: oklch(0.64 0.115 28); --error-500: oklch(0.52 0.130 28); /* ← anchor */ --error-600: oklch(0.43 0.125 28); --error-700: oklch(0.35 0.110 28); /* text-error */ --error-800: oklch(0.26 0.085 28); /* INFO (cool blue, H=225 — distinto del teal brand H=220) — D19 NEW Family nueva para neutral informativo, hint, learn more, banners de contexto. Hue intencionalmente desplazado +5° del teal brand para que no se lea como CTA del brand. También usado en data viz como reference / benchmark / forecast (ver D20). */ --info-100: oklch(0.95 0.025 225); --info-200: oklch(0.88 0.055 225); --info-300: oklch(0.78 0.080 225); --info-400: oklch(0.66 0.100 225); /* data-forecast (con pattern dashed) */ --info-500: oklch(0.55 0.110 225); /* ← anchor · data-reference (benchmark lines) */ --info-600: oklch(0.45 0.105 225); --info-700: oklch(0.36 0.090 225); /* text-info */ --info-800: oklch(0.27 0.070 225); /* ════════════════════════════════════════════════════════════ CAPA C — Semantic tokens (Vellum cascade — default :root) ════════════════════════════════════════════════════════════ La API que los componentes UI consumen. Mapea intención a valor, cascade-aware. Permite cambiar el sistema sin tocar 500 lugares. Regla estricta: componentes UI consumen SOLO Capa C semantic. Capa A y B son la paleta interna disponible para brand identity scoped, data viz y excepciones declaradas. ──────────────────────────────────────────────────────────── */ /* ── Text — 2 niveles + disabled (D17) text-subtle eliminado del sistema. Solo text-default + text-muted + text-disabled. Regla de uso: --text-default para todo el contenido, --text-muted para metadata/contexto. Ver typography.md § Regla de color del texto. */ --text-default: var(--slate-900); /* cool dark — D14: replaces --ink anchor (D18 cross) */ --text-muted: var(--slate-600); /* cool, family del default — D18 */ --text-emphasis: var(--teal-700); --text-link: var(--teal-700); --text-inverse: var(--vellum); --text-success: var(--success-700); --text-warning: var(--warning-700); --text-error: var(--error-700); --text-info: var(--info-700); /* D19: era alias de --accent, ahora info family */ /* ── Surface — 3 roles canónicos + tinted + notification Cross-cascade: default/elevated/sunken. Container terminales: elevated y sunken solo contienen default adentro (D9). Ver surface.md § Los 3 roles canónicos. */ --surface-default: var(--vellum); /* lienzo base */ --surface-elevated: var(--vellum-50); /* raised lighter — cards principales */ --surface-sunken: var(--vellum-200); /* sub-break darker — apoyo, info cards */ --surface-warm: var(--ochre-100); /* tint amber — solo con meaning (pillar Social) */ --surface-cool: var(--plum-100); /* tint mauve — solo con meaning (pillar Governance) */ --surface-mineral: var(--contour-100); /* tint sage — solo con meaning (pillar Environmental) */ --surface-success: var(--success-100); --surface-warning: var(--warning-100); --surface-error: var(--error-100); --surface-info: var(--info-100); /* D19 */ /* ── Border --border-control: form control outline en resting state (default/disabled/readonly mismo valor — el outline define el field shape, no es signal de estado). Hover/focus/error override semánticamente. */ --border-default: var(--vellum-300); /* hairline genérico (slot 4) */ --border-control: oklch(0.74 0.018 75); /* visible sobre vellum y vellum-200 */ --border-disabled: var(--border-control); /* alias semántico — disabled state */ --border-success: var(--success-500); --border-warning: var(--warning-500); --border-error: var(--error-500); --border-info: var(--info-500); /* D19 */ /* ── Interactive Patrón de hover: mismo color family, hacia el bg luminance. En vellum cascade el accent se oscurece (teal-700 → teal-800); en slate cascade se aclara (teal-500 → teal-400). NO se cambia de hue (no hover a beacon). */ --accent: var(--teal-700); /* brand primary */ --accent-hover: var(--teal-800); /* next darker step (no jump de hue) */ --accent-pressed: var(--teal-800); /* D16: antes --teal-900 (eliminado) */ --accent-subtle: var(--teal-100); --accent-active: var(--beacon); /* NOW marker, momento activo */ --focus-ring: var(--teal-500); /* ── Disabled state Colores sólidos (no opacity-based) para contrast predecible cross-surface. Valores específicos (no aliases) para garantizar stand-out incluso dentro de cards raised. WCAG 1.4.3 exempta disabled text del 4.5:1 ratio. */ --text-disabled: oklch(0.68 0.02 75); /* warm-mid, ~2.4:1 contrast */ --surface-disabled: oklch(0.87 0.015 75); /* distinct de vellum/vellum-200 */ /* ── Logo iso color on slate El mark del logo (path con fill="var(--contour)") sobre slate migra a contour-400 — lighter contour para lift sobre slate-bg SIN perder lineage del Environmental pillar. Token dedicado formalizado 2026-05-13 para que consumers (nav, sidebar, futuros) lean una semantic clara. */ --logo-mark-slate: var(--contour-400); /* ── Scrim Background base para overlays oscuros sobre video/imagen (hero nav scrim, legibility scrim). Sale de slate, no es hue custom. Consumers aplican opacity inline: background: rgb(from var(--scrim-bg) r g b / 0.62); */ --scrim-bg: var(--slate); /* anchor brand */ /* ════════════════════════════════════════════════════════════ Data viz — semantic tokens (D20) ════════════════════════════════════════════════════════════ El color en data viz debe ser honesto con el meaning que el dato carga. 4 modos distintos + reference. Cada modo usa una sub-paleta específica. Ver color.md § Data layer. Antes de elegir paleta: preguntarse "qué representa el color en este dato". El color no debe inventar meaning que el data no tiene. ──────────────────────────────────────────────────────────── */ /* Categorical · BREADTH — categorías independientes sin meaning de estado. Hasta 5 series. D21: cat-1 = teal-500 (no teal-700 anchor) para separarse de --accent CTA que es teal-700 — un bar chart con teal-700 se confundiría con un CTA. */ --data-cat-1: var(--teal-500); --data-cat-2: var(--beacon-500); --data-cat-3: var(--ochre-400); --data-cat-4: var(--contour-600); --data-cat-5: var(--plum-600); /* Status · SEMANTIC — data con meaning de estado/compliance/ performance vs target. Functional colors directos. */ --data-status-success: var(--success-500); --data-status-warning: var(--warning-500); --data-status-error: var(--error-500); /* Diverging · BIPOLAR — desviación +/− de un punto neutro. Brand-coherent (beacon vs contour), no stoplight rojo-verde. La versión muted lee como variance, no warning agresivo. */ --data-div-neg-2: var(--beacon-700); --data-div-neg-1: var(--beacon-300); --data-div-mid: var(--vellum-200); --data-div-pos-1: var(--contour-300); --data-div-pos-2: var(--contour-700); /* Reference · CONTEXT — benchmark lines, forecasts, annotations. Info family — neutral pero distinguible del data. */ --data-reference: var(--info-500); /* benchmark, target line */ --data-forecast: var(--info-400); /* projected (con pattern dashed) */ /* ════════════════════════════════════════════════════════════ Graphic layer — visual language brand ════════════════════════════════════════════════════════════ Lenguaje visual de marca (hero engines, path waypoints, atmospherics, polígonos). Hoy resuelve a los mismos primitivos que --data-cat-N, pero es capa separada que puede evolucionar independiente (ADR 0009 § D2). Regla: charts consumen --data-cat-N, graphics consumen --graphic-N. No mezclar consumers. ──────────────────────────────────────────────────────────── */ --graphic-1: var(--teal); /* anchor brand para visuals */ --graphic-2: var(--beacon); --graphic-3: var(--ochre); --graphic-4: var(--contour); --graphic-5: var(--plum); /* ════════════════════════════════════════════════════════════ Pillar aliases ════════════════════════════════════════════════════════════ Mapping inicial — flexible, ajustable al confirmar con stakeholders. Componentes consumen --pillar-*; cambiar valor aquí no requiere tocar componentes. ──────────────────────────────────────────────────────────── */ --pillar-environmental: var(--contour); /* = data-cat-4 */ --pillar-social: var(--ochre); /* = data-cat-3 */ --pillar-governance: var(--plum); /* = data-cat-5 */ --pillar-environmental-tint: var(--contour-100); /* = surface-mineral */ --pillar-social-tint: var(--ochre-100); /* = surface-warm */ --pillar-governance-tint: var(--plum-100); /* = surface-cool */ /* ════════════════════════════════════════════════════════════ ALIASES DEPRECATED (retro-compat) — eliminar cuando consumers migren ════════════════════════════════════════════════════════════ Mantenidos para que consumers legacy (homepage-v10.X, exploraciones, art-direction) sigan funcionando durante la migración. Componentes nuevos NUNCA deben consumirlos. Migration map para componentes: - --stone, --stone-300 → --vellum-400 (D14, absorbed) - --ink, --ink-900 → --slate-900 (D14, absorbed) - --ink-2/3/4, --ink-400..800 → slate mirror (approximation cool) - --text-subtle → --text-muted (D17) - --teal-900 → --teal-800 (D16) - --rule → --border-default - --vellum-2 → --vellum-200 - --surface-2 → --surface-sunken - --slate-bg/-bg-2 → --slate-900/-800 (via cascade) - --slate-fg/-fg-2/-fg-3 → --text-default/muted/muted (via cascade) - --slate-rule/-rule-2 → --border-default (via cascade) - --slate-mono → --accent (via cascade) - --data-1..5 → --data-cat-1..5 (D20) - --div-* → --data-div-* (D20) - --seq-1..7 → tonal scale del brand color (D20 sequential) ──────────────────────────────────────────────────────────── */ /* Stone — absorbed en --vellum-400 (D14) */ --stone: var(--vellum-400); /* anchor warm-mid eliminado, mismo hex #B8B0A0 */ --stone-200: oklch(0.84 0.018 75); /* approximation — use --vellum-300 */ --stone-300: var(--vellum-400); /* alias del anchor original */ --stone-400: oklch(0.62 0.020 75); /* warm-mid darker, no equiv en mirror */ /* Ink — absorbed en --slate-900 (D14) NOTA: ink era warm-dark (H≈70-75), slate es cool (H=220). El alias preserva luminance pero cambia hue. Consumers sensibles a "warmth" deben migrar a --vellum-400 o aceptar el shift cool. */ --ink: var(--slate-900); /* anchor warm-dark eliminado */ --ink-900: var(--slate-900); --ink-800: var(--slate-800); /* approximation slate (was warm L=0.27) */ --ink-600: var(--slate-700); /* approximation slate (was warm L=0.42) */ --ink-400: var(--slate-600); /* approximation slate (was warm L=0.62) */ --ink-2: var(--slate-800); /* legacy alias */ --ink-3: var(--slate-700); /* legacy alias */ --ink-4: var(--slate-600); /* legacy alias */ /* Text — subtle eliminado D17, alias a muted */ --text-subtle: var(--text-muted); /* DEPRECATED — use --text-muted */ /* Teal-900 — eliminado D16 (a esa luminance teal pierde identidad) */ --teal-900: var(--teal-800); /* DEPRECATED — use --teal-800 */ /* Borders/surfaces — aliases legacy */ --rule: var(--border-default); /* DEPRECATED — use --border-default */ --vellum-2: var(--vellum-200); /* DEPRECATED — use --vellum-200 or --surface-sunken */ --surface-2: var(--surface-sunken); /* DEPRECATED — use --surface-sunken */ /* Slate legacy primitives (refactor 2026-05-20) */ --slate-bg: var(--slate-900); /* DEPRECATED — use --slate or --surface-default via cascade */ --slate-bg-2: var(--slate-800); /* DEPRECATED — use --surface-elevated via cascade */ --slate-fg: var(--vellum); /* DEPRECATED — use --text-default via cascade */ --slate-fg-2: var(--vellum-400); /* DEPRECATED — use --text-muted via cascade (D14: was --stone) */ --slate-fg-3: var(--vellum-400); /* DEPRECATED — text-subtle eliminado (D17); migra a --text-muted */ --slate-rule: var(--slate-700); /* DEPRECATED — use --border-default via cascade */ --slate-rule-2: var(--slate-600); /* DEPRECATED — use --slate-600 directo si necesario */ --slate-mono: var(--teal-500); /* DEPRECATED — use --accent via cascade. Antes era sage #8AA396 */ --slate-400: var(--vellum-400); /* DEPRECATED — D15: slot mid eliminado, no existe en escala espejo */ /* Data viz — aliases legacy (D20) */ --data-1: var(--data-cat-1); /* DEPRECATED — use --data-cat-1 */ --data-2: var(--data-cat-2); /* DEPRECATED — use --data-cat-2 */ --data-3: var(--data-cat-3); /* DEPRECATED — use --data-cat-3 */ --data-4: var(--data-cat-4); /* DEPRECATED — use --data-cat-4 */ --data-5: var(--data-cat-5); /* DEPRECATED — use --data-cat-5 */ --div-neg-2: var(--data-div-neg-2); /* DEPRECATED — use --data-div-neg-2 */ --div-neg-1: var(--data-div-neg-1); /* DEPRECATED — use --data-div-neg-1 */ --div-mid: var(--data-div-mid); /* DEPRECATED — use --data-div-mid */ --div-pos-1: var(--data-div-pos-1); /* DEPRECATED — use --data-div-pos-1 */ --div-pos-2: var(--data-div-pos-2); /* DEPRECATED — use --data-div-pos-2 */ /* Sequential cartográfico (legacy — paradigma D20 reemplazado por tonal scale del brand color que aplique al dataset; ver color.md § Sequential DEPTH). Mantenidos para charts legacy que aún no migraron. */ --seq-1: #E8E1D2; --seq-2: #C7BFAA; --seq-3: #9BA897; --seq-4: #6E8A86; --seq-5: #4A6E78; --seq-6: #2D4A5A; --seq-7: #1A2E3A; } /* ════════════════════════════════════════════════════════════ Slate cascade override ════════════════════════════════════════════════════════════ Cuando un componente vive dentro de [data-surface="immersive"] (o el atributo legacy [data-surface="slate"], que aún usa el quiz), los semánticos se redefinen. El componente consume --text-default sin saber el contexto. Asymmetry intencional (D18): 1. Default cruza warm↔cool (contraste cromático "papel cálido sobre noche fría" / "cinematic dark + warm light") 2. Muted vive en family del DEFAULT, no del surface (en slate cascade default es warm → muted también warm) Filosofía vellum-on-slate, never white — todo foreground sobre slate es warm. ──────────────────────────────────────────────────────────── */ [data-surface="immersive"], [data-surface="slate"] { /* rol immersive = material slate. [data-surface="slate"] = atributo legacy (quiz). Ver surface.md § Dos ejes */ /* Text — foregrounds warm (D18 cross + asymmetry) */ --text-default: var(--vellum); /* warm light — cross cool dark surface */ --text-muted: var(--vellum-400); /* warm, family del default (D14: replaces --stone) */ --text-emphasis: var(--vellum); --text-link: var(--teal-500); /* teal-family alineado (was --slate-mono sage) */ --text-inverse: var(--slate-900); /* Surface — 3 roles simétricos al vellum cascade */ --surface-default: var(--slate); /* = --slate-900 */ --surface-elevated: var(--slate-800); /* raised lighter */ --surface-sunken: var(--slate-950); /* sunken darker — code blocks, inset, advanced view */ /* Border */ --border-default: var(--slate-700); /* Interactive — accent on slate via teal-family directo (was --slate-mono sage, eliminado en refactor 2026-05-20). Hover lift towards bg (lighter en slate cascade). */ --accent: var(--teal-500); /* lift sobre slate-bg */ --accent-hover: var(--teal-400); /* hover lighter (towards bg) */ --accent-pressed: var(--teal-300); --accent-subtle: var(--teal-800); /* subtle bg sobre slate */ --accent-active: var(--slate-beacon); /* warm beacon shift sobre slate */ --focus-ring: var(--teal-500); /* Disabled cascade — slate family H=220 (teal lineage post 2026-05-20) */ --text-disabled: oklch(0.55 0.012 220); /* muted slate, ~2.4:1 sobre slate-800 */ --border-control: oklch(0.46 0.012 220); /* light slate hairline */ --border-disabled: var(--border-control); --surface-disabled: oklch(0.28 0.012 220); /* subtle raise from --slate */ /* Lift de data + graphic colors sobre slate. Teal y plum suben un step (mejor contraste con bg oscuro). Beacon swappea a su variante warmer (--slate-beacon). Ochre y contour se quedan iguales — su L baseline ya funciona sobre slate. */ --data-cat-1: var(--teal-400); /* lift adicional sobre teal-500 baseline */ --data-cat-2: var(--slate-beacon); --data-cat-5: var(--plum-500); --graphic-1: var(--teal-500); --graphic-2: var(--slate-beacon); --graphic-5: var(--plum-500); /* Legacy aliases redefinidos en slate cascade. ─────────────────────────────────────────────────────────── CRÍTICO: un alias `--A: var(--B)` se computa en el scope donde se DECLARA. Si --A vive solo en :root pero --B se redefine en esta cascade, --A queda "congelado" con el valor de :root (NO re-evalúa var(--B) acá). Por eso los aliases que apuntan a tokens cascade-sensibles DEBEN redeclararse acá para seguir el cross-cascade. Sin esto, p.ej. --text-subtle resolvía a slate-600 (cool de :root) en vez de vellum-400 (warm de slate), pintando los eyebrows fríos. */ --text-subtle: var(--text-muted); /* → vellum-400 warm (sigue muted en slate) */ --rule: var(--border-default); /* → slate-700 (sigue border-default en slate) */ --surface-2: var(--surface-sunken); /* → slate-950 */ --data-1: var(--data-cat-1); /* lift en slate */ --data-2: var(--data-cat-2); --data-5: var(--data-cat-5); } /* ════════════════════════════════════════════════════════════ Contour cascade override ════════════════════════════════════════════════════════════ Surface sage-green deep (--contour = contour-600) con foreground warm light — misma filosofía vellum-on-dark del slate, en la familia Environmental. Usado por NAVEGACIÓN: el footer (siempre contour) y el mega-menú. Antes cada uno copiaba estos remaps a mano (footer.css, academy Nav) → ahora el rol chrome los centraliza. Valores codificados de los consumidores probados (mega-menú + footer), no inventados: muted = vellum 65%, border = vellum 22%, hover lift hacia contour-300. En contour el accent es VELLUM — la superficie YA es el verde de marca, un accent verde sería invisible; el contraste lo da el bloque claro (no teal). ──────────────────────────────────────────────────────────── */ [data-surface="chrome"], [data-surface="contour"] { /* rol chrome = material contour. [data-surface="contour"] = atributo legacy. Ver surface.md § Dos ejes */ /* Text — warm light sobre sage deep */ --text-default: var(--vellum); --text-muted: color-mix(in srgb, var(--vellum) 65%, transparent); --text-emphasis: var(--vellum); --text-link: var(--vellum); --text-inverse: var(--slate-900); /* bloque claro (botón vellum) sobre contour → texto ink, como en slate */ /* Surface — 3 roles en la familia contour */ --surface-default: var(--contour); /* = contour-600 #4A6A5A */ --surface-elevated: var(--contour-500); /* raised lighter */ --surface-sunken: var(--contour-700); /* sunken darker */ /* Border — vellum hairline a baja opacidad (proven: mega-menú) */ --border-default: color-mix(in srgb, var(--vellum) 22%, transparent); /* Interactive — accent vellum; hover lift hacia contour claro (proven: footer) */ --accent: var(--vellum); --accent-hover: var(--contour-300); --focus-ring: var(--vellum); /* Legacy aliases cascade-sensibles (mismo motivo que en slate) */ --rule: var(--border-default); --surface-2: var(--surface-sunken); } /* ════════════════════════════════════════════════════════════ Tinted surface contexts (warm/cool/mineral) ════════════════════════════════════════════════════════════ Surfaces opcionales para secciones con meaning específico (Social/Governance/Environmental cuando aplique). No cambian text/border defaults — el contraste se valida caso por caso al aplicar; si emerge la necesidad, se override aquí. ──────────────────────────────────────────────────────────── */ [data-surface="warm"] { --surface-default: var(--surface-warm); } [data-surface="cool"] { --surface-default: var(--surface-cool); } [data-surface="mineral"] { --surface-default: var(--surface-mineral); }