/* ============================================================================= RUTINITAS — TOKENS ============================================================================= Base estructural: design system `ng-template` (Angular 21 + Material). Base cromática: la paleta Rutinitas de la landing de referencia (crema + ámbar + teal, más la expansión pastel sun / mint / lav / pink / sky). QUÉ SE TOCÓ Y POR QUÉ --------------------- `ng-template` NO es una marca: su DESIGN.md §3 declara que de las 7 anclas de color sólo CUATRO son slots que el generador rellena por proyecto — `header`, `primary`, `secondary`, `tertiary` — y que `success` / `warning` / `error` son constantes semánticas que NO se reemplazan nunca. Esos 4 slots ahora llevan la paleta Rutinitas: header → cream #ebe0cd (el header cálido de la referencia) primary → amber #ef9d4e ("Primary — color de acción / CTA") secondary → teal #00695c (teal-deep del par teal de la referencia) tertiary → lavanda #685ab2 (lav-ink #7a6ad1 con la regla -dark del template) Los 9 derivados se recalculan con la MISMA regla del template, no a ojo: -light = mix(white, C, 82%) → 82% blanco + 18% color -container = mix(white, C, 90%) → 90% blanco + 10% color -dark = mix(black, C, 15%) → 15% negro + 85% color DOS DESVÍOS DECLARADOS respecto del contrato de `ng-template`: 1. Los `--app-on-*` de header, primary, secondary y tertiary se recalculan por luminancia del ancla, que es exactamente lo que el propio DESIGN.md dice que hace el generador con `--app-on-header` y lo que explica por qué `--app-on-warning` es NEGRO. Con un ancla cálida clara, el texto blanco no llega a 4.5:1; el ancla manda sobre el literal. 2. Las superficies de tema CLARO (`--theme-bg`, `--theme-text`, `--theme-border`…) toman las de la referencia (crema #fff9f0 / tinta #3d3222). El gris frío #f5f5f5 del template peleaba con una paleta cálida. El tema OSCURO queda igual que el contrato. HUECO DECLARADO: las 12 neutrales (`--app-neutral*`) se dejan como las trae el contrato. Regenerarlas cálidas es el paso `bin/generate-palettes.js` sobre las nuevas anclas por HCT — fuera del alcance de un prototipo HTML. Donde se notaba el choque (chips neutros) se usa la capa de producto `--rt-neutral-*`. CONTRASTES VERIFICADOS (WCAG AA, texto normal ≥ 4.5:1) cream #ebe0cd + #5a4632 → 6.8 amber #ef9d4e + #4a2e08 → 5.7 teal #00695c + #ffffff → 6.6 lav #685ab2 + #ffffff → 5.7 tinta #3d3222 sobre #fff9f0 → 12.0 tinta suave #7c6f5d sobre #fff9f0 → 4.7 ============================================================================= */ /* ----------------------------------------------------------------------------- 1. ANCLAS DE COLOR — 9 tokens 4 slots con la paleta Rutinitas · 3 constantes semánticas intactas -------------------------------------------------------------------------- */ :root { --app-header: #ebe0cd; /* slot — cream, el header cálido */ --app-on-header: #5a4632; /* calculado por luminancia: cream es claro → tinta marrón */ --app-primary: #ef9d4e; /* slot — amber, color de acción / CTA */ --app-secondary: #00695c; /* slot — teal profundo, apoyo / confianza */ --app-tertiary: #685ab2; /* slot — lavanda, de lav-ink #7a6ad1 */ --app-success: #2e7d32; /* constante semántica — NO se reemplaza */ --app-warning: #f57c00; /* constante semántica — NO se reemplaza */ --app-error: #c62828; /* constante semántica — NO se reemplaza */ --app-super-admin: #ffde00; /* hueco declarado del contrato */ /* --------------------------------------------------------------------------- 2. DERIVADOS POR mix() — 9 tokens, con la regla del template ------------------------------------------------------------------------ */ --app-primary-light: #fceddf; /* mix(white, #ef9d4e, 82%) */ --app-primary-container: #fdf5ed; /* mix(white, #ef9d4e, 90%) */ --app-primary-dark: #cb8542; /* mix(black, #ef9d4e, 15%) */ --app-secondary-light: #d1e4e2; /* mix(white, #00695c, 82%) */ --app-secondary-container: #e6f0ef; /* mix(white, #00695c, 90%) */ --app-secondary-dark: #00594e; /* mix(black, #00695c, 15%) */ --app-tertiary-light: #e4e1f1; /* mix(white, #685ab2, 82%) */ --app-tertiary-container: #f0eff7; /* mix(white, #685ab2, 90%) */ --app-tertiary-dark: #584d97; /* mix(black, #685ab2, 15%) */ /* --------------------------------------------------------------------------- 3. ON-COLOR — 6 tokens Recalculados por luminancia del ancla (desvío 1 de la cabecera). ------------------------------------------------------------------------ */ --app-on-primary: #4a2e08; /* marrón oscuro: el mismo que la referencia usa sobre amber */ --app-on-secondary: #ffffff; --app-on-tertiary: #ffffff; --app-on-success: #ffffff; --app-on-warning: #000000; --app-on-error: #ffffff; /* --------------------------------------------------------------------------- 4. NEUTRALES — 7 tokens (verbatim del contrato, ver hueco declarado) ------------------------------------------------------------------------ */ --app-neutral: #76777a; --app-neutral-light: #c7c6ca; --app-neutral-dark: #2f3033; --app-neutral-bg: #f1f0f4; --app-neutral-bg-dark: #1a1c1e; --app-neutral-surface: #faf9fd; --app-neutral-outline: #909094; /* --------------------------------------------------------------------------- 5. NEUTRAL VARIANT — 5 tokens (verbatim) ------------------------------------------------------------------------ */ --app-neutral-variant: #74777e; --app-neutral-variant-light: #c4c6ce; --app-neutral-variant-dark: #2d3037; --app-neutral-variant-bg: #eff0f9; --app-neutral-variant-outline: #8e9198; } /* ----------------------------------------------------------------------------- 6. TIPOGRAFÍA — 9 tokens (verbatim del contrato) Sin Google Fonts: se referencian por nombre y resuelven local o al fallback. -------------------------------------------------------------------------- */ :root { --primary-font: Poppins, sans-serif; --secondary-font: Open Sans, sans-serif; --terciary-font: Montserrat, sans-serif; /* sic — typo real del token */ --monospace-font: M PLUS 1 Code, monospace; --font-light: 300; --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 800; } /* ----------------------------------------------------------------------------- 7. LAYOUT / GRID — 21 tokens (verbatim) -------------------------------------------------------------------------- */ :root { --grid-container-width: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); --grid-profile-card: repeat(auto-fit, minmax(min(100%, 19.74rem), 1fr)); --grid-skills-width: repeat(auto-fit, minmax(min(100%, 19.74rem), 1fr)); --grid-mobile-width: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); --grid-complete-width: repeat(auto-fit, minmax(min(100%, 36rem), 1fr)); --grid-footer-width: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); --gallery-pic-width: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); --forma-input-width: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); --services-blocks-width: repeat(auto-fit, minmax(min(100%, 32rem), 1fr)); --container-width: min(100%, 12rem); --container-pic-width: minmax(min(100%, 12rem), 1fr); --container-minmax-width: minmax(min(100%, 12rem), 1fr); --gallery-container-width: minmax(min(100%, 12rem), 1fr); --main-section-width: minmax(min(80%, 12rem), 80%); --navbar-width: min(100%, 18rem); --logo-width: min(100%, 10rem); --ticker: min(100%, 28rem); --header-height: 5rem; --container-height: calc(100vh - 5rem); --gallery-container-height: calc(80vh - 13rem); --main-section-height: calc(100vh - var(--header-height)); } /* ----------------------------------------------------------------------------- 8. TEMA — MODO CLARO Superficies cálidas de la referencia (desvío 2 de la cabecera). -------------------------------------------------------------------------- */ :root { --theme-bg: #fff9f0; /* crema muy suave */ --theme-bg-elevated: #ffffff; --theme-bg-surface: #fffcf7; --theme-text: #3d3222; /* tinta cálida */ --theme-text-secondary: #7c6f5d; --theme-text-disabled: #b9afa1; --theme-border: #f0e6d6; --theme-divider: rgba(124, 111, 93, 0.18); --theme-header-bg: var(--app-header); --theme-header-text: var(--app-on-header); --theme-sidenav-bg: #ffffff; --theme-sidenav-text: #3d3222; --theme-sidenav-hover: #fff9f0; --theme-sidenav-active-bg: var(--app-primary-container); --theme-sidenav-active-text: var(--app-on-header); --theme-sidenav-subitem-bg: var(--app-primary-container); --theme-sidenav-subitem-hover: var(--app-primary-light); --mat-sys-on-surface: var(--theme-text); --mat-form-field-outlined-input-text-color: var(--theme-text); /* Chips de agente y badges de resultado: verbatim del contrato */ --agent-frontend-text: #1a237e; --agent-frontend-bg: #e8eaf6; --agent-frontend-legacy-text: #4a148c; --agent-frontend-legacy-bg: #f3e5f5; --agent-backend-text: #004d40; --agent-backend-bg: #e0f2f1; --agent-bff-text: #e65100; --agent-bff-bg: #fff3e0; --agent-qa-text: #b71c1c; --agent-qa-bg: #ffebee; --agent-devops-text: #263238; --agent-devops-bg: #eceff1; --agent-migration-text: #3e2723; --agent-migration-bg: #efebe9; --agent-ui-text: #0d47a1; --agent-ui-bg: #e3f2fd; --agent-planner-text: #1b5e20; --agent-planner-bg: #e8f5e9; --agent-default-text: #37474f; --agent-default-bg: #eceff1; --result-success-text: #1b5e20; --result-success-bg: #e8f5e9; --result-failure-text: #b71c1c; --result-failure-bg: #ffebee; --result-timeout-text: #e65100; --result-timeout-bg: #fff3e0; } /* ----------------------------------------------------------------------------- 9. TEMA — MODO OSCURO (verbatim del contrato) Selector por ATRIBUTO sobre , sin media query. Ningún `--app-*` cambia. -------------------------------------------------------------------------- */ [data-theme='dark'] { --theme-bg: #121212; --theme-bg-elevated: #1e1e1e; --theme-bg-surface: #252525; --theme-text: #f5f5f5; --theme-text-secondary: #cccccc; --theme-text-disabled: #777777; --theme-border: #333333; --theme-divider: rgba(255, 255, 255, 0.12); --theme-header-bg: #1e1e1e; --theme-header-text: #ffffff; --theme-sidenav-bg: #1e1e1e; --theme-sidenav-text: #f5f5f5; --theme-sidenav-hover: #333333; --theme-sidenav-active-bg: #3a2d1c; /* ámbar apagado sobre superficie oscura */ --theme-sidenav-active-text: var(--app-primary); /* 6.1:1 */ --theme-sidenav-subitem-bg: #3a2d1c; --theme-sidenav-subitem-hover: #4d3c26; --mat-sys-on-surface: var(--theme-text); --mat-form-field-outlined-input-text-color: var(--theme-text); --mat-form-field-container-text-color: var(--theme-text); --agent-frontend-text: #9fa8da; --agent-frontend-bg: rgba(26, 35, 126, 0.25); --agent-frontend-legacy-text: #ce93d8; --agent-frontend-legacy-bg: rgba(74, 20, 140, 0.25); --agent-backend-text: #80cbc4; --agent-backend-bg: rgba(0, 77, 64, 0.25); --agent-bff-text: #ffb74d; --agent-bff-bg: rgba(230, 81, 0, 0.2); --agent-qa-text: #ef9a9a; --agent-qa-bg: rgba(183, 28, 28, 0.2); --agent-devops-text: #b0bec5; --agent-devops-bg: rgba(38, 50, 56, 0.3); --agent-migration-text: #bcaaa4; --agent-migration-bg: rgba(62, 39, 35, 0.25); --agent-ui-text: #90caf9; --agent-ui-bg: rgba(13, 71, 161, 0.25); --agent-planner-text: #a5d6a7; --agent-planner-bg: rgba(27, 94, 32, 0.25); --agent-default-text: #b0bec5; --agent-default-bg: rgba(55, 71, 79, 0.3); --result-success-text: #a5d6a7; --result-success-bg: rgba(27, 94, 32, 0.25); --result-failure-text: #ef9a9a; --result-failure-bg: rgba(183, 28, 28, 0.2); --result-timeout-text: #ffb74d; --result-timeout-bg: rgba(230, 81, 0, 0.2); --mdc-outlined-text-field-container-color: transparent; --mdc-filled-text-field-container-color: #1a1c1e; --mdc-text-field-filled-container-color: #1a1c1e; } /* ----------------------------------------------------------------------------- 10. TEMA SANDBOX (verbatim) -------------------------------------------------------------------------- */ [data-sandbox='true'] { --theme-header-bg: var(--app-warning); --theme-header-text: #000000; --theme-sidenav-active-bg: #fff3e0; --theme-sidenav-active-text: #f57c00; --theme-sidenav-subitem-bg: #fff8e1; --theme-sidenav-subitem-hover: #ffecb3; } [data-theme='dark'][data-sandbox='true'] { --theme-header-bg: var(--app-warning); --theme-header-text: #000000; --theme-sidenav-active-bg: #4a3000; --theme-sidenav-active-text: #ffb74d; --theme-sidenav-subitem-bg: #3d2800; --theme-sidenav-subitem-hover: #5c3d00; } /* ============================================================================= 11. CAPA DE PRODUCTO — `--rt-*` ============================================================================= Cubre los huecos que el DESIGN.md de ng-template declara inexistentes (espaciado, radios, motion, elevación, escala tipográfica) y define el sistema de franjas horarias sobre la expansión pastel de la referencia. CÓMO FUNCIONA UNA FRANJA — cinco papeles, no uno: --rt-X color vivo: relleno de botón, barra de progreso, celda llena --rt-X-on texto sobre el vivo (por eso NO es siempre blanco) --rt-X-soft PASTEL de superficie: card, chip, carril, tarjetón --rt-X-tint un paso más saturado que el pastel: bordes y avatares --rt-X-deep tinta oscura legible SOBRE el pastel Es el mismo modelo de la referencia: cada pastel viene con su tinta. ============================================================================= */ :root { /* ── Mañana — familia sun / amber ──────────────────────────────────────── */ --rt-manana: var(--app-primary); /* #ef9d4e */ --rt-manana-on: var(--app-on-primary); /* #4a2e08 · 5.7:1 */ --rt-manana-soft: #fff0c2; /* sun */ --rt-manana-tint: #ffe09a; /* sun un paso más saturado */ --rt-manana-deep: #5a4632; /* on-cream · 7.9:1 sobre sun */ /* ── Tarde — familia mint / teal ───────────────────────────────────────── */ --rt-tarde: var(--app-secondary); /* #00695c */ --rt-tarde-on: var(--app-on-secondary); /* #ffffff · 6.6:1 */ --rt-tarde-soft: #cdeede; /* mint */ --rt-tarde-tint: #a9dfc9; /* mint un paso más saturado */ --rt-tarde-deep: #00594e; /* teal más profundo · 5.3:1 sobre mint */ /* ── Noche — familia lav / lavanda ─────────────────────────────────────── */ --rt-noche: var(--app-tertiary); /* #685ab2 */ --rt-noche-on: var(--app-on-tertiary); /* #ffffff · 5.7:1 */ --rt-noche-soft: #e2d9ff; /* lav */ --rt-noche-tint: #c9baff; /* lav un paso más saturado */ --rt-noche-deep: #584d97; /* lavanda oscura · 5.3:1 sobre lav */ /* Franja activa — la pisa `[data-franja]` más abajo */ --rt-franja: var(--rt-manana); --rt-franja-on: var(--rt-manana-on); --rt-franja-soft: var(--rt-manana-soft); --rt-franja-tint: var(--rt-manana-tint); --rt-franja-deep: var(--rt-manana-deep); /* ── Pastel reservados de la referencia, todavía sin franja asignada ───── */ --rt-pink: #ffd6e0; --rt-pink-ink: #c65f7b; --rt-sky: #d4ecff; --rt-sky-ink: #3d8fc7; /* ── Neutro cálido: reemplaza al gris frío del contrato en el producto ─── */ --rt-neutral-soft: #f0e6d6; --rt-neutral-ink: #7c6f5d; --rt-taupe: #a98b68; /* ── Estrella: el oro de la referencia ─────────────────────────────────── */ --rt-estrella: #f5b53a; /* ── Papel y tinta: la hoja impresa NO sigue al tema ───────────────────── */ --rt-papel: #ffffff; --rt-tinta: #3d3222; /* ── Tipografía de producto: extiende las familias del contrato ────────── */ --rt-font-display: Poppins, ui-rounded, 'Trebuchet MS', var(--primary-font); --rt-font-body: 'Open Sans', 'Segoe UI', system-ui, var(--secondary-font); --rt-font-mono: 'M PLUS 1 Code', ui-monospace, Menlo, var(--monospace-font); /* ── Escala tipográfica ────────────────────────────────────────────────── */ --rt-text-xs: 0.75rem; --rt-text-sm: 0.875rem; --rt-text-md: 1rem; --rt-text-lg: 1.125rem; --rt-text-xl: 1.375rem; --rt-text-2xl: clamp(1.6rem, 3vw, 2.1rem); --rt-text-3xl: clamp(2rem, 5vw, 3.2rem); /* ── Espaciado ─────────────────────────────────────────────────────────── */ --rt-space-1: 0.25rem; --rt-space-2: 0.5rem; --rt-space-3: 0.75rem; --rt-space-4: 1rem; /* Alto real del header EN PANTALLA. El contrato declara `--header-height` y no se toca: acá se le suma la franja del sistema, que vale 0px en un navegador normal y sólo aparece cuando la página se dibuja por debajo de la barra de estado del teléfono (la del reloj y la señal). Hoy no pasa: el de estas pantallas no lleva `viewport-fit=cover`, así que el sistema ya reserva la franja. Queda puesto igual porque el día que alguien agregue ese atributo —para ganar los bordes en una pantalla con muesca— el header se metería debajo del reloj sin que nada avise. Es una defensa barata: no cambia un píxel hoy. */ --rt-header-total: calc(var(--header-height) + env(safe-area-inset-top, 0px)); --rt-space-5: 1.5rem; --rt-space-6: 2rem; --rt-space-7: 3rem; --rt-space-8: 4.5rem; /* ── Radios: la referencia es más redonda que el template ──────────────── */ --rt-radius-sm: 1rem; --rt-radius-md: 1.625rem; --rt-radius-lg: 2.5rem; --rt-radius-pill: 62.4375rem; /* ── Motion ────────────────────────────────────────────────────────────── */ --rt-dur-fast: 0.12s; --rt-dur: 0.2s; --rt-dur-slow: 0.45s; --rt-ease: ease-in-out; --rt-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* ── Elevación: sombra cálida, no gris ─────────────────────────────────── */ --rt-elev-1: 0 0.375rem 1rem -0.75rem rgba(120, 90, 40, 0.35); --rt-elev-2: 0 0.875rem 2.5rem -1.125rem rgba(120, 90, 40, 0.35); --rt-elev-3: 0 1.625rem 3.75rem -1.375rem rgba(120, 90, 40, 0.45); /* ── Anchos de layout del producto ─────────────────────────────────────── */ --rt-shell-nav: 16.5rem; --rt-content-max: 76rem; /* ── PERSONAJE ───────────────────────────────────────────────────────────── Paleta de rasgos del avatar. No es piel de marca ni superficie de tema: es CONTENIDO — la cara de un chico real. Por eso vive acá, con nombre propio, y NO cambia en modo oscuro: la piel de una persona no se re-tinta. El avatar de js/personajes.js las consume por var(), así que sigue sin haber un solo hex suelto fuera de este archivo. ---------------------------------------------------------------------- */ --rt-piel-1: #f7d9c4; --rt-piel-2: #eec2a4; --rt-piel-3: #d9a074; --rt-piel-4: #bb7a4e; --rt-piel-5: #8d5524; --rt-piel-6: #5c3317; --rt-pelo-1: #241a15; /* negro */ --rt-pelo-2: #4a2f1c; /* castaño oscuro */ --rt-pelo-3: #7b4a24; /* castaño */ --rt-pelo-4: #b5651d; /* castaño rojizo — el de las 17 ilustraciones */ --rt-pelo-5: #c1502a; /* pelirrojo */ --rt-pelo-6: #dfae62; /* rubio */ --rt-mejilla: #f2a6a6; --rt-peca: #a9683f; --rt-trazo-cara: #3d2b1f; } [data-theme='dark'] { --rt-neutral-soft: #2a2620; --rt-neutral-ink: #cbbfae; --rt-elev-1: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.5); --rt-elev-2: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.55); --rt-elev-3: 0 0.75rem 2rem rgba(0, 0, 0, 0.65); } /* ── Conmutador de franja: un solo atributo re-tiñe toda una región ─────── */ [data-franja='manana'] { --rt-franja: var(--rt-manana); --rt-franja-on: var(--rt-manana-on); --rt-franja-soft: var(--rt-manana-soft); --rt-franja-tint: var(--rt-manana-tint); --rt-franja-deep: var(--rt-manana-deep); } [data-franja='tarde'] { --rt-franja: var(--rt-tarde); --rt-franja-on: var(--rt-tarde-on); --rt-franja-soft: var(--rt-tarde-soft); --rt-franja-tint: var(--rt-tarde-tint); --rt-franja-deep: var(--rt-tarde-deep); } [data-franja='noche'] { --rt-franja: var(--rt-noche); --rt-franja-on: var(--rt-noche-on); --rt-franja-soft: var(--rt-noche-soft); --rt-franja-tint: var(--rt-noche-tint); --rt-franja-deep: var(--rt-noche-deep); } /* En oscuro el pastel no puede ser el pastel: se re-deriva como mezcla sobre la superficie elevada, y la tinta `-deep` se invierte a un tono claro para mantener el contraste. Ningún `--app-*` cambia. */ [data-theme='dark'] [data-franja='manana'], [data-theme='dark'][data-franja='manana'] { --rt-franja-soft: #43352a; --rt-franja-tint: #624932; --rt-franja-deep: #f6bd8b; } [data-theme='dark'] [data-franja='tarde'], [data-theme='dark'][data-franja='tarde'] { --rt-franja-soft: #393e3c; --rt-franja-tint: #545d58; --rt-franja-deep: #d6f1e4; } [data-theme='dark'] [data-franja='noche'], [data-theme='dark'][data-franja='noche'] { --rt-franja-soft: #2e2c3e; --rt-franja-tint: #3b3758; --rt-franja-deep: #e5deff; } /* ═══════════════════════════════════════════════════════════════════════ RESPALDO PARA NAVEGADORES ANTERIORES A 2023 Arriba cada valor quedó como color fijo, calculado con la misma matemática oklab que usa el navegador. Acá se restituye la mezcla para los que la entienden, así cambiar un token sigue arrastrando a sus derivados. Un navegador viejo ignora este bloque entero y se queda con los fijos: la misma pantalla, sin nada transparente. Generado desde scripts/colores.cjs · el gate es scripts/compat.cjs ═══════════════════════════════════════════════════════════════════════ */ @supports (color: color-mix(in oklab, red 50%, blue)) { /* Las mezclas claras no deben sobrescribir los tokens del modo oscuro. */ :root:not([data-theme='dark']) { --theme-bg-surface: color-mix(in oklab, #fff9f0 55%, var(--rt-papel)); --theme-text-disabled: color-mix(in oklab, #7c6f5d 52%, #fff9f0); --theme-divider: color-mix(in oklab, #7c6f5d 18%, transparent); } [data-theme='dark'] [data-franja='manana'], [data-theme='dark'][data-franja='manana'] { --rt-franja-soft: color-mix(in oklab, var(--rt-manana) 20%, var(--theme-bg-elevated)); --rt-franja-tint: color-mix(in oklab, var(--rt-manana) 36%, var(--theme-bg-elevated)); --rt-franja-deep: color-mix(in oklab, var(--rt-manana) 68%, var(--rt-papel)); } [data-theme='dark'] [data-franja='tarde'], [data-theme='dark'][data-franja='tarde'] { --rt-franja-soft: color-mix(in oklab, var(--rt-tarde-soft) 18%, var(--theme-bg-elevated)); --rt-franja-tint: color-mix(in oklab, var(--rt-tarde-soft) 34%, var(--theme-bg-elevated)); --rt-franja-deep: color-mix(in oklab, var(--rt-tarde-soft) 82%, var(--rt-papel)); } [data-theme='dark'] [data-franja='noche'], [data-theme='dark'][data-franja='noche'] { --rt-franja-soft: color-mix(in oklab, var(--rt-noche) 24%, var(--theme-bg-elevated)); --rt-franja-tint: color-mix(in oklab, var(--rt-noche) 42%, var(--theme-bg-elevated)); --rt-franja-deep: color-mix(in oklab, var(--rt-noche-soft) 88%, var(--rt-papel)); } } /* Acciones con texto blanco: contraste independiente del ámbar decorativo. */ :root { --rt-action-bg: #b85b16; --rt-action-hover: #9c4710; --rt-action-active: #843c0d; --rt-action-text: #ffffff; --rt-action-shadow: 0 1px 1px rgba(70, 70, 70, 0.55); --rt-action-franja: var(--rt-action-bg); --rt-action-franja-hover: var(--rt-action-hover); } [data-franja='manana'] { --rt-action-franja: var(--rt-action-bg); --rt-action-franja-hover: var(--rt-action-hover); } [data-franja='tarde'] { --rt-action-franja: #00695c; --rt-action-franja-hover: #005347; } [data-franja='noche'] { --rt-action-franja: #685ab2; --rt-action-franja-hover: #51438f; } /* Selectores de preferencias: paleta independiente de la franja de actividad. */ :root { --rt-selector-bg: var(--theme-bg-surface); --rt-selector-text: var(--theme-text-secondary); --rt-selector-hover-text: var(--theme-text); --rt-selector-selected-bg: var(--rt-action-bg); --rt-selector-selected-hover: var(--rt-action-hover); --rt-selector-selected-text: var(--rt-action-text); --rt-selector-selected-shadow: var(--rt-action-shadow); }