/* * BUILD 3 · los tokens de color del diseñador (SPEC §4.1 y §4.2). * * ADR-21: un solo juego de tokens declarado dos veces — `:root` es la variante * 2a (negro cálido, default) y `[data-tema="claro"]` es la 3a (papel cálido). * * VIVE EN `public/` A PROPÓSITO: los archivos de `public/` se sirven byte por * byte, y el pipeline de CSS del bundler reescribe los literales de color * (`#ffffff` → `#fff`). Los valores son del diseño y tienen que llegar al * navegador tal como él los escribió, así que este archivo no se procesa. * * Junto con `app/globals.css` son los ÚNICOS archivos de `apps/web` que pueden * contener un hexadecimal. Todo lo demás consume `var(--token)`. */ /* * `.tema-oscuro` es el MISMO juego de tokens declarado sobre una clase, para * las pantallas que son oscuras siempre — hoy solo la landing pública. Al vivir * en el elemento, gana sobre el `[data-tema="claro"]` que pueda traer el * de un usuario que dejó el panel en tema claro. */ :root, .tema-oscuro { color-scheme: dark; /* ── Color ─────────────────────────────────────────────────────────────── */ --bg: #12100d; --bg-2: #161310; --surface: #1b1815; --surface-2: #2b2620; --border: #2b2620; --border-2: #3a322a; --border-accent: #4d3d2c; --line: #4d443a; --text: #efe9e0; --text-2: #d8cbb8; --muted: #b3a898; --muted-2: #8a7d6d; --faint: #5c5248; --accent: #e0a370; --accent-deep: #a8683c; --accent-fg: #12100d; --ok: #8fbf7f; --ok-bg: #1e2a1b; --hot: #d97b6c; --hot-bg: #2e1f1c; --hot-border: #43302b; --warm: #e0a370; --cold: #7fa8bf; --purple: #c4a5d9; /* ── Tiers del panal ───────────────────────────────────────────────────── */ --tier-1: #e0a370; --tier-1-bg: #2a1f12; --tier-2: #8fbf7f; --tier-2-bg: #1c2418; --tier-3: #7fa8bf; --tier-3-bg: #172026; --tier-4: #c4a5d9; --tier-4-bg: #211a26; --tier-0: #3a322a; --tier-0-bg: #161310; --hex-sel-rim: #efe9e0; --hex-sel-bg: #241e17; /* ── Acento de ESTADO (build 7) ──────────────────────────────────────────── * El tercer acento no trae colores nuevos: es un ALIAS con nombre semántico * de los que el diseñador ya definió arriba. Verde = listo, cobre = requiere * atención, neutro = pronto. Al ser `var(--…)` y no literales, los dos temas * se resuelven solos y la paleta llega byte por byte como él la escribió. */ --estado-ok: var(--ok); --estado-ok-bg: var(--ok-bg); --estado-ok-borde: var(--tier-2); --estado-atencion: var(--accent); --estado-atencion-bg: var(--tier-1-bg); --estado-atencion-borde: var(--border-accent); --estado-neutro: var(--muted-2); --estado-neutro-bg: var(--tier-0-bg); --estado-neutro-borde: var(--tier-0); /* El simulador imita WhatsApp: su paleta es de la marca ajena, no del tema. */ --wa-header: #075e54; --wa-canvas: #0d1418; --wa-mine: #005c4b; --wa-theirs: #202c33; --wa-text: #e9edef; --wa-meta: #8696a0; --wa-tick: #53bdeb; --wa-input: #2a3942; --wa-bar: #111b21; } [data-tema="claro"] { color-scheme: light; --bg: #faf7f1; --bg-2: #f3eee4; --surface: #ffffff; --surface-2: #ece5d8; --border: #e6ded1; --border-2: #d8cdb9; --border-accent: #d8b48f; --line: #c9bda9; --text: #26221c; --text-2: #4d463c; --muted: #7d7161; --muted-2: #a3947d; --faint: #c9bda9; --accent: #b5713c; --accent-deep: #8a5424; --accent-fg: #faf7f1; --ok: #5e9450; --ok-bg: #dcead6; --hot: #c25545; --hot-bg: #fbe9e7; --hot-border: #ecc9c2; --warm: #b5713c; --cold: #4a7d99; --purple: #8a63a3; --tier-1: #b5713c; --tier-1-bg: #f7ece0; --tier-2: #5e9450; --tier-2-bg: #eaf2e6; --tier-3: #4a7d99; --tier-3-bg: #e7f0f5; --tier-4: #8a63a3; --tier-4-bg: #f1eaf7; --tier-0: #c9bda9; --tier-0-bg: #f3eee4; --hex-sel-rim: #26221c; --hex-sel-bg: #f7ece0; }