/* ── 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), monótona: - Oscuro: 0 = más profundo (casi negro) → 11 = gris medio - Claro: 0 = más hundido → 8 = blanco; 9-11 se reservan para bordes En UI usar SIEMPRE los aliases semánticos (--color-shell, --color-surface, --color-surface-elevated, --color-input, --color-border…), nunca la rampa. Jerarquía de superficies (de fondo a frente): content → shell → surface → surface-raised → surface-elevated El rail acompaña al tema y se apoya un escalón por debajo de `shell`. */ [data-theme="dark"] { color-scheme: dark; /* ── Rampa de grises (pasos ~7 de separación real) ── */ --gray-0: #0f0f0f; --gray-1: #151515; --gray-2: #1c1c1c; --gray-3: #232323; --gray-4: #2a2a2a; --gray-5: #323232; --gray-6: #3c3c3c; --gray-7: #474747; --gray-8: #545454; --gray-9: #646464; --gray-10: #777777; --gray-11: #8d8d8d; /* ── Superficies ── */ --color-content: var(--gray-1); /* lienzo de la app */ --color-shell: var(--gray-2); /* sidebar / header */ --color-surface-sunken: var(--gray-0); /* pozos, tracks */ --color-surface: var(--gray-3); /* cards, paneles */ --color-surface-raised: var(--gray-4); /* card sobre card */ --color-surface-elevated: var(--gray-5); /* popovers, menús, buscador */ --color-input: var(--gray-4); --color-surface-hover: var(--gray-6); --color-bg: var(--color-content); /* ── Rail (app switcher) — misma superficie que el sidebar; sólo un divisor los separa, para que se lean como una única zona de nav. ── */ --color-rail: var(--color-shell); --color-rail-text: var(--color-text); --color-rail-muted: var(--color-text-muted); --color-rail-hover: rgba(255, 255, 255, 0.06); --color-rail-border: var(--color-border-subtle); /* ── Bordes ── */ --color-border-subtle: #262626; --color-border: #363636; --color-border-strong: #474747; /* ── Texto ── */ --color-text: #f4f4f5; --color-text-secondary: #b6b6b8; --color-text-muted: #8b8b8b; --color-text-disabled: #565656; /* ── Elevación ── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4); --color-overlay: rgba(0, 0, 0, 0.6); } [data-theme="light"] { color-scheme: light; /* ── Rampa de grises ── 0-8 hunden→blanco; 9-11 son bordes. */ --gray-0: #e9eaed; --gray-1: #eef0f2; --gray-2: #f4f5f7; --gray-3: #f8f9fa; --gray-4: #fbfbfc; --gray-5: #fdfdfe; --gray-6: #ffffff; --gray-7: #ffffff; --gray-8: #ffffff; --gray-9: #e3e4e8; --gray-10: #d3d4d9; --gray-11: #b6b7bd; /* ── Superficies ── separación real vía lienzo hundido + sombra. */ --color-content: var(--gray-2); /* lienzo #f4f5f7 */ --color-shell: #ffffff; /* sidebar / header */ --color-surface-sunken: var(--gray-0); /* pozos, tracks #e9eaed */ --color-surface: #ffffff; /* cards, paneles */ --color-surface-raised: #ffffff; /* (se levanta con --shadow-sm) */ --color-surface-elevated: #ffffff; /* popovers (se levanta con --shadow-md) */ --color-input: var(--gray-1); /* input apenas hundido #eef0f2 */ --color-surface-hover: var(--gray-1); /* hover sobre blanco, visible */ --color-bg: var(--color-content); /* ── Rail — misma superficie que el sidebar; sólo un divisor los separa. ── */ --color-rail: var(--color-shell); --color-rail-text: var(--color-text); --color-rail-muted: var(--color-text-muted); --color-rail-hover: rgba(17, 20, 28, 0.05); --color-rail-border: var(--color-border-subtle); /* ── Bordes ── */ --color-border-subtle: #edeef1; --color-border: #dedfe3; --color-border-strong: #c9cace; /* ── Texto ── */ --color-text: #1a1a1e; --color-text-secondary: #52535b; --color-text-muted: #74757c; --color-text-disabled: #a6a7ad; /* ── Elevación ── sombras que efectivamente levantan. */ --shadow-sm: 0 1px 2px rgba(17, 20, 28, 0.08), 0 1px 3px rgba(17, 20, 28, 0.04); --shadow-md: 0 4px 14px rgba(17, 20, 28, 0.1), 0 2px 6px rgba(17, 20, 28, 0.06); --color-overlay: rgba(17, 20, 28, 0.32); }