/** * AscensorDocs — Variables CSS (Design Tokens) * Paleta: azul hielo / casi blanco frío. Modo claro por defecto. * El modo oscuro se activa con [data-theme="dark"] en el . */ /* ── Modo claro (defecto) ──────────────────────────────────────────────────── */ :root { --color-bg: #f0f5fb; --color-bg-elevated: #ffffff; --color-bg-card: #ffffff; --color-bg-hover: #e8f0fb; --color-bg-input: #f0f5fb; --color-border: #d4e3f5; --color-border-light: #e4eef9; --color-border-strong:#b8d0ef; --color-text-primary: #0f2040; --color-text-secondary: #4b6a96; --color-text-muted: #8aabcf; --color-text-inverse: #ffffff; --color-accent: #2563eb; --color-accent-dim: #bfdbfe; --color-accent-glow: rgba(37, 99, 235, 0.08); --color-accent-hover: #1d4ed8; --color-accent-text: #1e3a8a; --shadow-sm: 0 1px 3px rgba(15, 32, 64, 0.06); --shadow: 0 4px 12px rgba(15, 32, 64, 0.08); --shadow-lg: 0 8px 32px rgba(15, 32, 64, 0.10); --shadow-accent: 0 0 20px rgba(37, 99, 235, 0.15); --color-success: #16a34a; --color-success-bg: #f0fdf4; --color-error: #dc2626; --color-error-bg: #fef2f2; --color-warning: #d97706; --color-warning-bg: #fffbeb; --color-pdf-bg: #fef2f2; --color-pdf-border: #fca5a5; --color-pdf-text: #dc2626; --color-scrollbar: #c7d9f0; } /* ── Modo oscuro ───────────────────────────────────────────────────────────── */ [data-theme="dark"] { --color-bg: #0d1520; --color-bg-elevated: #111d2e; --color-bg-card: #162236; --color-bg-hover: #1a2a40; --color-bg-input: #0d1520; --color-border: #1e3352; --color-border-light: #172845; --color-border-strong:#2a4570; --color-text-primary: #e8f0fb; --color-text-secondary: #7aa3cc; --color-text-muted: #3d5d80; --color-text-inverse: #0d1520; --color-accent: #3b82f6; --color-accent-dim: #1e3a8a; --color-accent-glow: rgba(59, 130, 246, 0.12); --color-accent-hover: #60a5fa; --color-accent-text: #93c5fd; --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow: 0 4px 12px rgba(0,0,0,0.5); --shadow-lg: 0 8px 32px rgba(0,0,0,0.6); --shadow-accent: 0 0 20px rgba(59, 130, 246, 0.2); --color-success: #22c55e; --color-success-bg: #052e16; --color-error: #f87171; --color-error-bg: #450a0a; --color-warning: #fbbf24; --color-warning-bg: #431407; --color-pdf-bg: #2d1515; --color-pdf-border: #7f1d1d; --color-pdf-text: #fca5a5; --color-scrollbar: #1e3352; } /* ── Tokens invariantes ────────────────────────────────────────────────────── */ :root { --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; --font-ui: 'Inter', 'Helvetica Neue', Arial, sans-serif; --text-xs: 0.625rem; --text-sm: 0.75rem; --text-base: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.5rem; --weight-regular: 400; --weight-medium: 500; --weight-bold: 600; --leading-tight: 1.2; --leading-normal: 1.5; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --radius-sm: 4px; --radius: 6px; --radius-lg: 10px; --radius-xl: 16px; --radius-full: 9999px; --transition-fast: 150ms ease; --transition: 250ms ease; --transition-slow: 400ms ease; --header-height: 52px; --nav-panel-width: 280px; --chat-modal-width: 420px; --chat-modal-height: 560px; --z-base: 1; --z-overlay: 100; --z-modal: 200; --z-toast: 300; --z-chat: 150; }