/* ── Temas: claro / oscuro ── Activar con data-theme="dark|light" en . Colores de superficie y texto — no hardcodear en componentes. Escala neutra (--gray-0 … --gray-11): - Oscuro: 0 = más profundo → 11 = más elevado / claro - Claro: 0 = más profundo (canvas) → 11 = más elevado (blanco / alto contraste de borde) Usar la rampa para matices finos; en UI preferir aliases semánticos (--color-shell, --color-surface, --color-input, etc.). */ [data-theme="dark"] { /* ── Rampa de grises (pasos suaves) ── */ --gray-0: #0d0d0d; --gray-1: #111111; --gray-2: #171717; --gray-3: #181818; --gray-4: #1c1c1c; --gray-5: #212121; --gray-6: #262626; --gray-7: #2c2c2c; --gray-8: #333333; --gray-9: #3a3a3a; --gray-10: #454545; --gray-11: #525252; /* ── Aliases semánticos (layout / componentes) ── */ --color-content: var(--gray-1); --color-shell: var(--gray-2); --color-surface-sunken: var(--gray-3); --color-rail: var(--gray-4); --color-surface: var(--gray-5); --color-surface-raised: var(--gray-6); --color-surface-elevated: var(--gray-7); --color-input: var(--gray-7); --color-surface-hover: var(--gray-8); --color-bg: var(--color-content); --color-rail-hover: rgba(255, 255, 255, 0.08); --color-rail-text: #f4f4f5; --color-rail-muted: #8a8a8a; --color-border-subtle: var(--gray-5); --color-border: var(--gray-9); --color-border-strong: var(--gray-10); --color-text: #f5f5f5; --color-text-secondary: #b8b8b8; --color-text-muted: #8a8a8a; --color-text-disabled: #555555; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --color-overlay: rgba(0, 0, 0, 0.55); } [data-theme="light"] { /* ── Rampa de grises (contraparte clara) ── Mismo índice = mismo rol relativo (canvas → elevado). */ --gray-0: #e4e4e7; --gray-1: #ececee; --gray-2: #f0f0f2; --gray-3: #f3f3f5; --gray-4: #f5f5f7; --gray-5: #f7f7f8; --gray-6: #fafafa; --gray-7: #fcfcfd; --gray-8: #ffffff; --gray-9: #e4e4e7; --gray-10: #d4d4d8; --gray-11: #a1a1aa; /* ── Aliases semánticos ── */ --color-content: var(--gray-1); --color-shell: var(--gray-8); --color-surface-sunken: var(--gray-2); --color-rail: #18181b; --color-surface: var(--gray-8); --color-surface-raised: var(--gray-6); --color-surface-elevated: var(--gray-6); --color-input: var(--gray-3); --color-surface-hover: var(--gray-4); --color-bg: var(--color-content); --color-rail-hover: rgba(255, 255, 255, 0.08); --color-rail-text: #f4f4f5; --color-rail-muted: #a1a1aa; --color-border-subtle: var(--gray-9); --color-border: var(--gray-10); --color-border-strong: var(--gray-11); --color-text: #18181b; --color-text-secondary: #52525b; --color-text-muted: #71717a; --color-text-disabled: #a1a1aa; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --color-overlay: rgba(0, 0, 0, 0.35); }