/* ============================================ THEME.CSS - Sistema de temas Light/Dark para CarWash Variables CSS personalizadas con prefijo --cw- ============================================ */ /* ============================================ LIGHT MODE (default) ============================================ */ :root { /* Surface / Background */ --cw-bg-body: #f8f9fa; --cw-bg-surface: #ffffff; --cw-bg-surface-secondary: #f1f5f9; --cw-bg-surface-tertiary: #e8ecf1; /* Text */ --cw-text-primary: #2c3e50; --cw-text-secondary: #6c757d; --cw-text-muted: #94a3b8; --cw-text-heading: #2c3e50; /* Brand colors */ --cw-primary: #4a90e2; --cw-primary-hover: #3a7bd5; --cw-primary-light: rgba(74, 144, 226, 0.1); --cw-success: #2ecc71; --cw-danger: #e74c3c; --cw-warning: #f39c12; --cw-info: #3498db; /* Borders */ --cw-border-color: #e8ecf1; --cw-border-color-subtle: #f1f5f9; /* Cards */ --cw-card-bg: #ffffff; --cw-card-border: transparent; --cw-card-header-bg: #ffffff; --cw-card-shadow: 0 0 20px rgba(0, 0, 0, 0.05); --cw-card-radius: 10px; --cw-card-hover-shadow: 0 4px 25px rgba(0, 0, 0, 0.1); /* Tables */ --cw-table-bg: transparent; --cw-table-striped-bg: #eef3f8; --cw-table-hover-bg: #e2ecf5; --cw-table-dark-bg: #2c3e50; --cw-table-dark-color: #ffffff; --cw-table-light-bg: #f8f9fa; --cw-thead-bg: #2c3e50; --cw-thead-color: #ffffff; /* Forms */ --cw-input-bg: #ffffff; --cw-input-border: #e0e0e0; --cw-input-color: #2c3e50; --cw-input-placeholder: #94a3b8; --cw-input-focus-border: #4a90e2; --cw-input-focus-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25); --cw-input-disabled-bg: #f1f5f9; --cw-input-radius: 8px; /* Modals */ --cw-modal-bg: #ffffff; --cw-modal-header-border: #e8ecf1; --cw-modal-footer-border: #e8ecf1; /* Links */ --cw-link-color: #4a90e2; /* Shadows */ --cw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); --cw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); /* Transition speed */ --cw-transition-speed: 0.2s; /* Loading overlay */ --cw-overlay-bg: rgba(0, 0, 0, 0.7); --cw-overlay-content-bg: #ffffff; --cw-overlay-content-color: #2c3e50; /* Code */ --cw-code-bg: #f1f5f9; --cw-code-color: #d63384; /* Nav tabs */ --cw-nav-tab-active-bg: #ffffff; --cw-nav-tab-hover-bg: #f1f5f9; /* Buttons */ --cw-btn-radius: 8px; --cw-btn-font-weight: 500; /* ---- Login ---- El login es la única pantalla con identidad propia: verde agua de car wash en vez del azul del sistema. Se define aquí, no en Login.razor.css, para que cambiar el verde siga siendo tocar un solo archivo. -accent-texto es una versión más oscura para textos pequeños: el verde de marca da 3.7:1 sobre blanco y WCAG pide 4.5:1 para texto normal. */ --cw-login-accent: #039685; --cw-login-accent-rgb: 3, 150, 133; --cw-login-accent-texto: #027668; --cw-login-accent-claro: #05b39b; --cw-login-card-width: 430px; --cw-login-radius: 0px; --cw-login-padding: 46px; --cw-login-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06); --cw-login-glass: rgba(255, 255, 255, 0.78); --cw-login-glass-border: rgba(255, 255, 255, 0.65); --cw-login-bubble-op: 1; } /* ============================================ DARK MODE ============================================ */ [data-theme="dark"] { /* Surface / Background */ --cw-bg-body: #1a1d23; --cw-bg-surface: #22262e; --cw-bg-surface-secondary: #2a2e36; --cw-bg-surface-tertiary: #32363e; /* Text */ --cw-text-primary: #e2e8f0; --cw-text-secondary: #a0aec0; --cw-text-muted: #718096; --cw-text-heading: #e2e8f0; /* Brand colors (dark variants) */ --cw-primary: #5a9be6; --cw-primary-hover: #4a8bd6; --cw-primary-light: rgba(90, 155, 230, 0.15); --cw-success: #3dd87e; --cw-danger: #e75c5c; --cw-warning: #f5b041; --cw-info: #5dade2; /* Borders */ --cw-border-color: #3a3f4a; --cw-border-color-subtle: #2d3139; /* Cards */ --cw-card-bg: #22262e; --cw-card-border: transparent; --cw-card-header-bg: #2a2e36; --cw-card-shadow: 0 0 20px rgba(0, 0, 0, 0.3); --cw-card-radius: 10px; --cw-card-hover-shadow: 0 4px 25px rgba(0, 0, 0, 0.4); /* Tables */ --cw-table-bg: transparent; --cw-table-striped-bg: rgba(255, 255, 255, 0.04); --cw-table-hover-bg: rgba(255, 255, 255, 0.08); --cw-table-dark-bg: #2a2e36; --cw-table-dark-color: #e2e8f0; --cw-table-light-bg: #2a2e36; --cw-thead-bg: #1a2332; --cw-thead-color: #e2e8f0; /* Forms */ --cw-input-bg: #2a2e36; --cw-input-border: #3a3f4a; --cw-input-color: #e2e8f0; --cw-input-placeholder: #718096; --cw-input-focus-border: #5a9be6; --cw-input-focus-shadow: 0 0 0 0.2rem rgba(90, 155, 230, 0.25); --cw-input-disabled-bg: #32363e; --cw-input-radius: 8px; /* Modals */ --cw-modal-bg: #22262e; --cw-modal-header-border: #3a3f4a; --cw-modal-footer-border: #3a3f4a; /* Links */ --cw-link-color: #5a9be6; /* Shadows */ --cw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --cw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); /* Loading overlay */ --cw-overlay-bg: rgba(0, 0, 0, 0.85); --cw-overlay-content-bg: #22262e; --cw-overlay-content-color: #e2e8f0; /* Code */ --cw-code-bg: #2a2e36; --cw-code-color: #f472b6; /* Nav tabs */ --cw-nav-tab-active-bg: #22262e; --cw-nav-tab-hover-bg: #32363e; /* Buttons */ --cw-btn-radius: 8px; --cw-btn-font-weight: 500; /* ---- Login (variantes oscuras) ---- Sobre fondo oscuro el verde de marca queda apagado, así que se aclara igual que el sistema aclara su azul (#4a90e2 -> #5a9be6). El cristal pasa de blanco translúcido a gris translúcido. */ --cw-login-accent: #05b39b; --cw-login-accent-rgb: 5, 179, 155; --cw-login-accent-texto: #05b39b; --cw-login-accent-claro: #3ecfba; --cw-login-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35); --cw-login-glass: rgba(40, 45, 55, 0.72); --cw-login-glass-border: rgba(255, 255, 255, 0.12); }