/* * TemaStripe 01-tokens.css * Design tokens: colores, sombras, radios, tipografia, espaciado. * Definidos como CSS variables para que el resto del tema se construya * sobre ellos y un futuro plugin pueda hacer "skin" cambiando solo * estos valores. */ :root { /* ---- Color: marca ---- */ --fs-c-primary: #635BFF; --fs-c-primary-hover: #5749E6; --fs-c-primary-active: #4639C7; --fs-c-primary-soft: #F2F1FF; --fs-c-primary-ring: rgba(99, 91, 255, 0.20); /* ---- Color: superficies y texto (light) ---- */ --fs-c-bg: #FFFFFF; --fs-c-bg-soft: #F6F8FB; --fs-c-bg-elevated: #FFFFFF; --fs-c-text: #0A2540; --fs-c-text-muted: #425466; --fs-c-text-soft: #8898A6; --fs-c-text-inverse: #FFFFFF; --fs-c-border: #E3E8EE; --fs-c-border-strong: #CED4DA; /* ---- Color: feedback ---- */ --fs-c-success: #00B85A; --fs-c-success-soft: #E5F8EE; --fs-c-warning: #FFAB00; --fs-c-warning-soft: #FFF7E0; --fs-c-danger: #FF5252; --fs-c-danger-soft: #FFEAEA; --fs-c-info: #00A4CF; --fs-c-info-soft: #E1F6FB; /* ---- Color: sidebar ---- */ --fs-c-sidebar-bg: #0A1F3D; --fs-c-sidebar-text: #C4CDD9; --fs-c-sidebar-text-active: #FFFFFF; --fs-c-sidebar-hover: rgba(255, 255, 255, 0.06); --fs-c-sidebar-active: rgba(99, 91, 255, 0.18); --fs-c-sidebar-border: rgba(255, 255, 255, 0.05); /* ---- Tipografia ---- */ --fs-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --fs-font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace; /* ---- Radios ---- */ --fs-radius-xs: 4px; --fs-radius-sm: 6px; --fs-radius: 8px; --fs-radius-lg: 12px; --fs-radius-xl: 16px; --fs-radius-full: 9999px; /* ---- Sombras (Stripe usa muy suaves) ---- */ --fs-shadow-xs: 0 1px 2px rgba(10, 37, 64, 0.05); --fs-shadow-sm: 0 2px 4px rgba(10, 37, 64, 0.06), 0 1px 2px rgba(10, 37, 64, 0.04); --fs-shadow-md: 0 4px 12px rgba(10, 37, 64, 0.08), 0 2px 4px rgba(10, 37, 64, 0.05); --fs-shadow-lg: 0 12px 32px rgba(10, 37, 64, 0.12), 0 4px 8px rgba(10, 37, 64, 0.06); --fs-shadow-xl: 0 24px 56px rgba(10, 37, 64, 0.16); /* ---- Transiciones ---- */ --fs-ease: cubic-bezier(0.4, 0, 0.2, 1); --fs-transition: 150ms var(--fs-ease); --fs-transition-md: 250ms var(--fs-ease); /* ---- Layout ---- */ --fs-sidebar-w: 240px; --fs-topbar-h: 56px; --fs-content-pad: 24px; } /* ============================================================ * Dark mode: paleta navy/indigo profunda * Activado con (lo aplica theme-toggle.js * antes del primer paint para evitar flash). * ============================================================ */ :root[data-theme="dark"] { --fs-c-bg: #0A1029; --fs-c-bg-soft: #0F1734; --fs-c-bg-elevated: #131C40; --fs-c-text: #E6EAF0; --fs-c-text-muted: #A0AAC0; --fs-c-text-soft: #6B7794; --fs-c-border: #1E2A4A; --fs-c-border-strong: #2B3964; --fs-c-primary-soft: rgba(99, 91, 255, 0.12); --fs-c-success-soft: rgba(0, 184, 90, 0.12); --fs-c-warning-soft: rgba(255, 171, 0, 0.12); --fs-c-danger-soft: rgba(255, 82, 82, 0.12); --fs-c-info-soft: rgba(0, 164, 207, 0.12); --fs-c-sidebar-bg: #060C20; --fs-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --fs-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25); --fs-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.30); --fs-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.50); }