:root { --color-bg: #0c0c0f; --color-surface: #17171d; --color-surface-alt: #1f1f27; --color-surface-hover: #26262f; --color-border: #2b2b34; --color-text: #f4f4f6; --color-text-muted: #9b9ba6; --color-text-faint: #6c6c78; --color-orange: #ff7a1a; --color-orange-hover: #ff8f3d; --color-orange-dim: rgba(255, 122, 26, 0.14); --color-success: #35c46a; --color-success-dim: rgba(53, 196, 106, 0.14); --color-danger: #ff5252; --color-danger-dim: rgba(255, 82, 82, 0.14); --color-warning: #ffb020; --color-info: #4d8ff0; --color-info-dim: rgba(77, 143, 240, 0.14); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.28); --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --font-display: "Space Grotesk", var(--font-sans); } /* Tema claro: se activa con data-theme="light" en , seteado por theme.js (lee la preferencia guardada en localStorage) antes del primer render, para no mostrar un flash del tema equivocado. */ :root[data-theme="light"] { --color-bg: #f7f6f4; --color-surface: #ffffff; --color-surface-alt: #f1efec; --color-surface-hover: #e8e5e1; --color-border: #e3dfd9; --color-text: #17161a; --color-text-muted: #5c5a56; --color-text-faint: #8b8884; --color-orange: #e8690a; --color-orange-hover: #d15f09; --color-orange-dim: rgba(232, 105, 10, 0.12); --color-success: #1f9d52; --color-success-dim: rgba(31, 157, 82, 0.12); --color-danger: #d93838; --color-danger-dim: rgba(217, 56, 56, 0.12); --color-warning: #b5790a; --color-info: #2f6fd6; --color-info-dim: rgba(47, 111, 214, 0.12); --shadow-card: 0 1px 2px rgba(20, 16, 8, 0.05), 0 8px 20px rgba(20, 16, 8, 0.06); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } a { color: inherit; } button { font-family: inherit; } ::selection { background: var(--color-orange-dim); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-surface-alt); border-radius: 8px; }