/* ============================================================ Expediente — fuente única de tokens (CSS custom properties) .claude/brand/DESIGN_SYSTEM.md §2 y §7. Selección en runtime vía atributos en : [data-tool] = "protocol" | "gengo" | "worldcup" | "kazen" [data-theme] = "light" | "dark" (default: light) Regla dura (DESIGN_SYSTEM.md §7): estos son los ÚNICOS lugares donde estos hex existen. tailwind.config.js SOLO mapea estas variables (colors: { accent: 'var(--accent)', ... }) — nunca duplica un hex a mano. Si un valor cambia, cambia aquí y solo aquí. Kazen NO carga este archivo (se queda en Bootstrap + su propio static/kazen/css/app.css, que ya trae estos mismos valores de base neutral 1:1 — ver DESIGN_SYSTEM.md §7). Este archivo es para Protocol / Gengo / Worldcup (Tailwind). ============================================================ */ /* --------------------------------------------------------------- 1. Base neutral (§2.1) — idéntica en las 4 herramientas. --------------------------------------------------------------- */ :root, [data-theme='light'] { --bg: #f6f5f8; --surface: #ffffff; --ink: #20213a; --muted: #6b6a7c; --muted-tint: #ecebf0; --rule: #dddbe4; --success: #2fa27a; --success-tint: #e2f3ec; --warn: #b58117; --warn-tint: #f6ecd9; --info: #4c7bd9; --info-tint: #e4ecfa; --danger: #b3403f; --danger-tint: #f7e5e4; } [data-theme='dark'] { --bg: #14141c; --surface: #1c1c26; --ink: #eceaf4; --muted: #a3a0b4; --muted-tint: #262532; --rule: #32313f; --success: #4fca9c; --success-tint: #1e3229; --warn: #d9a54a; --warn-tint: #332a1a; --info: #7ba2ec; --info-tint: #1f2740; --danger: #e08886; --danger-tint: #3a2323; } /* --------------------------------------------------------------- 2. Acento por herramienta (§2.2) — identidad, nunca estado. Default (sin [data-tool] o data-tool="protocol") = Protocol. --------------------------------------------------------------- */ :root, [data-tool='protocol'] { --accent: #16A34A; --accent-deep: #15803D; --accent-tint: #E7F5EC; } [data-theme='dark'][data-tool='protocol'], [data-theme='dark']:not([data-tool]) { --accent: #00FF41; --accent-deep: #22BB44; --accent-tint: #12271A; } [data-tool='gengo'] { --accent: #128d76; --accent-deep: #0d6c5a; --accent-tint: #def2ed; } [data-theme='dark'][data-tool='gengo'] { --accent: #41c3a9; --accent-deep: #63d3bd; --accent-tint: #1d322c; } [data-tool='worldcup'] { --accent: #B3500D; --accent-deep: #8A3D09; --accent-tint: #F7E4D3; } [data-theme='dark'][data-tool='worldcup'] { --accent: #E2954F; --accent-deep: #EEB37C; --accent-tint: #3A2818; } [data-tool='kazen'] { --accent: #6d5ef0; --accent-deep: #4c3ed9; --accent-tint: #eceafc; } [data-theme='dark'][data-tool='kazen'] { --accent: #8b7dff; --accent-deep: #a89dff; --accent-tint: #2a2743; } /* --------------------------------------------------------------- 3. CRT glow — ÚNICA excepción documentada (§4.1, §8): el logo-letra "P" de Protocol en tema oscuro. No reintroducir en ningún otro sitio. Guardado por selector de atributo: la clase solo tiene efecto si el HTML real está en data-tool=protocol + data-theme=dark, sin importar dónde se use la clase. --------------------------------------------------------------- */ .protocol-mark-glow { box-shadow: none; } [data-tool='protocol'][data-theme='dark'] .protocol-mark-glow { box-shadow: 0 0 8px rgba(0, 255, 65, .55), 0 0 20px rgba(0, 255, 65, .25); }