/* ═══════════════════════════════════════════ tokens.css — paleta y escalas de YAMT Único lugar donde viven los colores. Lo cargan tanto el panel (junto a base.css) como las pantallas de auth, que tienen CSS propio. Tema: claro por defecto, oscuro con ═══════════════════════════════════════════ */ :root{ color-scheme:light; /* Surfaces */ --bg:#f5f5f7; --surface:#fff; --surface2:#f9f9fb; --surface3:#f0f0f4; --surface4:#e8e8ee; --border:#e4e4ea; --border-hover:#d0d0d8; /* Text */ --text:#111118; --text-secondary:#45455a; --muted:#8b8ba0; /* Semantic */ --green:#16a34a; --green-glow:rgba(22,163,74,.08); --red:#dc2626; --red-glow:rgba(220,38,38,.07); --orange:#d97706; --orange-glow:rgba(217,119,6,.07); --purple:#7c3aed; --purple-glow:rgba(124,58,237,.07); /* Accent: dark/black */ --accent:#18181b; --accent2:#27272a; --accent-glow:rgba(24,24,27,.06); --accent-border:rgba(24,24,27,.15); /* Radii */ --radius:10px; --radius-sm:6px; --radius-lg:14px; --radius-xl:20px; /* Shadows */ --shadow-xs:0 1px 2px rgba(0,0,0,.04); --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04); --shadow-md:0 4px 12px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04); --shadow-lg:0 12px 40px rgba(0,0,0,.1),0 4px 12px rgba(0,0,0,.04); --shadow-card:0 1px 3px rgba(0,0,0,.04); /* Typography */ --font:'DM Sans',system-ui,-apple-system,sans-serif; --mono:'JetBrains Mono',ui-monospace,'Cascadia Code',monospace; --text-xs:.68rem; --text-sm:.78rem; --text-base:.85rem; --text-md:.92rem; --text-lg:1rem; --text-xl:1.15rem; --text-2xl:1.5rem; --text-3xl:1.85rem; /* Motion */ --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --dur-fast:.12s; --dur-base:.2s; --dur-slow:.4s; /* Layout */ --sb-w:256px; --topbar-h:52px; /* Texto sobre el acento (botones sólidos) — se invierte en oscuro */ --on-accent:#fff; /* Texto sobre fondos de color saturado (badges rojo/verde, avatares DTE). Es blanco en AMBOS temas: esos fondos no cambian con el tema. */ --on-solid:#fff; /* Pares de badge/pill: fondo tenue + texto legible sobre él. Definidos como par para que el contraste se mantenga en ambos temas. */ --tint-red:#fee2e2; --on-red:#b91c1c; --tint-green:#d1fae5; --on-green:#047857; --tint-blue:#dbeafe; --on-blue:#1e40af; --tint-amber:#fef3c7; --on-amber:#92400e; --tint-purple:#f3e8ff; --on-purple:#6d28d9; --tint-pink:#fce7f3; --on-pink:#be185d; --tint-slate:#f1f5f9; --on-slate:#475569; --blue:#3b82f6; --blue-glow:rgba(59,130,246,.07); /* Superficie de código: oscura en AMBOS temas (no se invierte) */ --code-surface:#1e293b; --code-surface-2:#0f172a; --code-fg:#e2e8f0; --overlay:rgba(0,0,0,.4); --scrim:rgba(255,255,255,.3); } /* ─── Tema oscuro ─── Solo se redefinen tokens de color; radios, tipografía y motion no cambian. */ :root[data-theme="dark"]{ color-scheme:dark; --bg:#0b0b0f; --surface:#141419; --surface2:#1a1a21; --surface3:#23232c; --surface4:#2e2e39; --border:#2a2a34; --border-hover:#3d3d4a; --text:#f2f2f7; --text-secondary:#b4b4c4; --muted:#83839a; /* El acento es monocromo: en claro es casi negro, en oscuro casi blanco. */ --accent:#f2f2f7; --accent2:#dcdce6; --accent-glow:rgba(242,242,247,.08); --accent-border:rgba(242,242,247,.22); --on-accent:#111118; /* Semánticos: se aclaran para mantener contraste sobre fondo oscuro */ --green:#34d399; --green-glow:rgba(52,211,153,.12); --red:#f87171; --red-glow:rgba(248,113,113,.12); --orange:#fbbf24; --orange-glow:rgba(251,191,36,.12); --purple:#a78bfa; --purple-glow:rgba(167,139,250,.12); --blue:#60a5fa; --blue-glow:rgba(96,165,250,.12); /* Badges: fondo translúcido del propio color + texto claro */ --tint-red:rgba(248,113,113,.15); --on-red:#fca5a5; --tint-green:rgba(52,211,153,.15); --on-green:#6ee7b7; --tint-blue:rgba(96,165,250,.15); --on-blue:#93c5fd; --tint-amber:rgba(251,191,36,.15); --on-amber:#fcd34d; --tint-purple:rgba(167,139,250,.15); --on-purple:#c4b5fd; --tint-pink:rgba(244,114,182,.15); --on-pink:#f9a8d4; --tint-slate:rgba(148,163,184,.13); --on-slate:#cbd5e1; --overlay:rgba(0,0,0,.65); --scrim:rgba(255,255,255,.14); /* Sombras: en oscuro la elevación se lee peor, se refuerzan */ --shadow-xs:0 1px 2px rgba(0,0,0,.5); --shadow-sm:0 1px 3px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 12px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4); --shadow-lg:0 12px 40px rgba(0,0,0,.6),0 4px 12px rgba(0,0,0,.4); --shadow-card:0 1px 3px rgba(0,0,0,.45); }