/* ========================================================= Dragon Sentinel - Design Tokens Paleta: Blanco · Rojo (marca Ful-Mar) · Cyan (metanol/química) Soporta tema claro (default) y tema oscuro vía [data-theme="dark"] sobre . Todo se consume desde tokens. ========================================================= */ :root { /* ---------- Marca (constante en ambos temas) ---------- */ --ds-brand-red: #dc2626; --ds-brand-red-dark: #991b1b; --ds-brand-red-light: #ef4444; --ds-brand-red-soft: #fee2e2; --ds-brand-red-softer: #fef2f2; --ds-brand-cyan: #0891b2; --ds-brand-cyan-dark: #0e7490; --ds-brand-cyan-light: #06b6d4; --ds-brand-cyan-soft: #cffafe; --ds-primary: var(--ds-brand-red); --ds-primary-dark: var(--ds-brand-red-dark); --ds-primary-light: var(--ds-brand-red-light); --ds-primary-soft: var(--ds-brand-red-soft); --ds-primary-contrast: #ffffff; --ds-secondary: var(--ds-brand-cyan); --ds-secondary-dark: var(--ds-brand-cyan-dark); --ds-secondary-light: var(--ds-brand-cyan-light); --ds-secondary-soft: var(--ds-brand-cyan-soft); --ds-white: #ffffff; --ds-black: #0f172a; /* ---------- Tipografía ---------- */ --ds-font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ds-font-display: "Outfit", "DM Sans", -apple-system, sans-serif; --ds-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --ds-fs-xs: 0.72rem; --ds-fs-sm: 0.812rem; --ds-fs-base: 0.875rem; --ds-fs-md: 0.938rem; --ds-fs-lg: 1.0625rem; --ds-fs-xl: 1.25rem; --ds-fs-2xl: 1.5rem; --ds-fs-3xl: 1.875rem; --ds-fw-regular: 400; --ds-fw-medium: 500; --ds-fw-semibold: 600; --ds-fw-bold: 700; --ds-lh-tight: 1.25; --ds-lh-base: 1.5; --ds-lh-loose: 1.7; /* ---------- Espaciado (ligeramente amplio: paneles, módulos, stacks) ---------- */ --ds-space-0: 0; --ds-space-1: 0.25rem; --ds-space-2: 0.5625rem; --ds-space-3: 0.8125rem; --ds-space-4: 1.125rem; --ds-space-5: 1.375rem; --ds-space-6: 1.625rem; --ds-space-8: 2.125rem; --ds-space-10: 2.625rem; --ds-space-12: 3.25rem; --ds-space-16: 4.25rem; /* ---------- Radios ---------- */ --ds-radius-xs: 3px; --ds-radius-sm: 5px; --ds-radius-md: 8px; --ds-radius-lg: 10px; --ds-radius-xl: 14px; --ds-radius-pill: 999px; /* ---------- Transiciones ---------- */ --ds-transition-fast: 120ms cubic-bezier(.4, 0, .2, 1); --ds-transition-base: 180ms cubic-bezier(.4, 0, .2, 1); --ds-transition-slow: 280ms cubic-bezier(.4, 0, .2, 1); /* ---------- Z-Index ---------- */ --ds-z-sidebar: 40; --ds-z-topbar: 50; --ds-z-overlay: 60; --ds-z-modal: 70; --ds-z-dropdown: 80; --ds-z-toast: 90; /* ---------- Layout ---------- */ /* Ancho mínimo para marca + logo + botón colapsar sin partir "Dragon Sentinel" */ --ds-sidebar-width: 252px; --ds-sidebar-width-collapsed: 64px; --ds-topbar-height: 60px; --ds-content-max: 1600px; } /* ========================================================= TEMA CLARO (default) ========================================================= */ :root, :root[data-theme="light"] { --ds-gray-50: #f8fafc; --ds-gray-100: #f1f5f9; --ds-gray-200: #e2e8f0; --ds-gray-300: #cbd5e1; --ds-gray-400: #94a3b8; --ds-gray-500: #64748b; --ds-gray-600: #475569; --ds-gray-700: #334155; --ds-gray-800: #1e293b; --ds-gray-900: #0f172a; /* Superficies / fondos */ --ds-bg: #f6f7f9; --ds-bg-alt: #ffffff; --ds-surface: #ffffff; --ds-surface-alt: #fafbfc; --ds-surface-hover: #f1f5f9; --ds-surface-elevated: #ffffff; /* Sidebar (oscuro elegante con un toque rojo) */ --ds-sidebar-bg-start: #0f172a; --ds-sidebar-bg-end: #1a2236; --ds-sidebar-text: #cbd5e1; --ds-sidebar-text-muted: #64748b; --ds-sidebar-text-active: #ffffff; --ds-sidebar-border: rgba(255, 255, 255, 0.06); --ds-sidebar-hover: rgba(255, 255, 255, 0.06); --ds-sidebar-active-bg: rgba(220, 38, 38, 0.18); --ds-sidebar-active-bar: var(--ds-brand-red); --ds-sidebar-icon: #94a3b8; /* Topbar */ --ds-topbar-bg: #ffffff; --ds-topbar-border: #e2e8f0; --ds-topbar-text: #0f172a; /* Texto */ --ds-text: #0f172a; --ds-text-strong: #020617; --ds-text-muted: #64748b; --ds-text-soft: #94a3b8; --ds-text-inverse: #ffffff; /* Bordes */ --ds-border: #e2e8f0; --ds-border-strong: #cbd5e1; --ds-border-soft: #f1f5f9; /* Estados */ --ds-success: #16a34a; --ds-success-soft: #dcfce7; --ds-success-strong: #166534; --ds-warning: #f59e0b; --ds-warning-soft: #fef3c7; --ds-warning-strong: #92400e; --ds-danger: #dc2626; --ds-danger-soft: #fee2e2; --ds-danger-strong: #991b1b; --ds-info: #0284c7; --ds-info-soft: #dbeafe; --ds-info-strong: #1e40af; /* Focus ring */ --ds-ring: rgba(220, 38, 38, 0.22); --ds-ring-cyan: rgba(8, 145, 178, 0.22); /* Sombras (calibradas: borde sutil + profundidad visible) */ --ds-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(15, 23, 42, 0.04); --ds-shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.05); --ds-shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.10), 0 2px 4px rgba(15, 23, 42, 0.06); --ds-shadow-lg: 0 12px 28px -6px rgba(15, 23, 42, 0.14), 0 4px 8px rgba(15, 23, 42, 0.08); --ds-shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.22); --ds-shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.05); /* Header de tabla */ --ds-table-head-bg: #f8fafc; --ds-table-head-text: #475569; --ds-table-row-hover: #f8fafc; --ds-table-border: #e2e8f0; color-scheme: light; } /* ========================================================= TEMA OSCURO ========================================================= */ :root[data-theme="dark"] { --ds-gray-50: #0b1220; --ds-gray-100: #0f172a; --ds-gray-200: #1e293b; --ds-gray-300: #334155; --ds-gray-400: #475569; --ds-gray-500: #64748b; --ds-gray-600: #94a3b8; --ds-gray-700: #cbd5e1; --ds-gray-800: #e2e8f0; --ds-gray-900: #f8fafc; /* Superficies */ --ds-bg: #0a0f1c; --ds-bg-alt: #0f172a; --ds-surface: #111827; --ds-surface-alt: #1a2236; --ds-surface-hover: #1e293b; --ds-surface-elevated: #1c2538; /* Sidebar: aún más oscuro para destacar del fondo */ --ds-sidebar-bg-start: #060912; --ds-sidebar-bg-end: #0d1424; --ds-sidebar-text: #cbd5e1; --ds-sidebar-text-muted: #64748b; --ds-sidebar-text-active: #ffffff; --ds-sidebar-border: rgba(255, 255, 255, 0.06); --ds-sidebar-hover: rgba(255, 255, 255, 0.05); --ds-sidebar-active-bg: rgba(239, 68, 68, 0.20); --ds-sidebar-active-bar: var(--ds-brand-red-light); --ds-sidebar-icon: #94a3b8; /* Topbar */ --ds-topbar-bg: #111827; --ds-topbar-border: #1e293b; --ds-topbar-text: #f1f5f9; /* Texto */ --ds-text: #e2e8f0; --ds-text-strong: #f8fafc; --ds-text-muted: #94a3b8; --ds-text-soft: #64748b; --ds-text-inverse: #0f172a; /* Bordes */ --ds-border: #1e293b; --ds-border-strong: #334155; --ds-border-soft: #1a2236; /* Estados (más saturados sobre fondo oscuro) */ --ds-success: #22c55e; --ds-success-soft: rgba(34, 197, 94, 0.15); --ds-success-strong: #4ade80; --ds-warning: #fbbf24; --ds-warning-soft: rgba(251, 191, 36, 0.15); --ds-warning-strong: #fcd34d; --ds-danger: #ef4444; --ds-danger-soft: rgba(239, 68, 68, 0.15); --ds-danger-strong: #f87171; --ds-info: #38bdf8; --ds-info-soft: rgba(56, 189, 248, 0.15); --ds-info-strong: #7dd3fc; --ds-ring: rgba(239, 68, 68, 0.32); --ds-ring-cyan: rgba(6, 182, 212, 0.32); /* Sombras: más profundas pero sutiles */ --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25); --ds-shadow-md: 0 4px 10px -2px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.25); --ds-shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.35); --ds-shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.65); --ds-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.35); --ds-table-head-bg: #1a2236; --ds-table-head-text: #94a3b8; --ds-table-row-hover: #1a2236; --ds-table-border: #1e293b; color-scheme: dark; }