/* synapse v2 — design tokens Soporta dos temas: claro (default) y oscuro (data-theme="dark"). El tema lo fija el script syn-theme.js en antes del render. */ :root { --bg-page: #f6f7fb; --bg-card: #ffffff; --bg-elev: #ffffff; /* superficies elevadas (paneles, popovers) */ --bg-input: #ffffff; --text: #1d2433; --text-muted: #6b7280; --text-subtle: #9aa1ad; --border: #e9ecf2; --border-strong: #dde1ea; --shadow: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 1px 3px rgba(15, 23, 42, 0.06); --shadow-lg: 0 8px 30px rgba(15, 23, 42, 0.08); --accent: #6347d1; /* morado synapse */ --accent-strong: #5238b8; --accent-soft: #efeafd; --accent-soft-2: #f5f1ff; /* Sidebar claro */ --side-bg: #ffffff; --side-bg-2: #fafbfd; --side-text: #1d2433; --side-muted: #707684; --side-hover: #f5f6fa; --side-active-bg: #f1ecff; --side-active-text: #5238b8; --side-active-bar: #6347d1; --side-border: #ececf2; --ok: #16a34a; --bad: #dc2626; --warn: #f59e0b; --info: #3b82f6; /* tonos suaves de estado para fondos / chips */ --ok-soft: #e7f6ec; --bad-soft: #fdecec; --warn-soft: #fef4e2; --info-soft: #e7f0fd; --radius: 10px; --radius-sm: 6px; --radius-pill: 999px; --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif; } /* ====================================================== TEMA OSCURO Activado con ====================================================== */ :root[data-theme="dark"] { --bg-page: #0f1117; --bg-card: #181b24; --bg-elev: #1d2130; --bg-input: #1f2330; --text: #e6e7eb; --text-muted: #a3a8b3; --text-subtle: #7a808d; --border: #262b38; --border-strong: #353b4a; --shadow: 0 1px 2px rgba(0, 0, 0, .35); --shadow-md: 0 2px 6px rgba(0, 0, 0, .4); --shadow-lg: 0 10px 30px rgba(0, 0, 0, .55); --accent: #8b6cf5; --accent-strong: #a890ff; --accent-soft: #2a234a; --accent-soft-2: #1f1933; --side-bg: #14161e; --side-bg-2: #181b24; --side-text: #d1d5dd; --side-muted: #8b919a; --side-hover: #1f2330; --side-active-bg: #2a234a; --side-active-text: #c0aaff; --side-active-bar: #8b6cf5; --side-border: #1f2330; --ok: #22c55e; --bad: #ef4444; --warn: #fbbf24; --info: #60a5fa; --ok-soft: #14301f; --bad-soft: #3a1818; --warn-soft: #382615; --info-soft: #1a2638; color-scheme: dark; }