/* Design tokens — SAAS Enterprise Estilo de referencia: Material Design (Google). Modo claro es el default (sin atributo). El modo oscuro se activa explícitamente con `data-theme="dark"` en — no sigue automáticamente la preferencia del sistema operativo, porque el producto arranca siempre en claro y el usuario decide el cambio (toggle, guardado en localStorage — la lógica del toggle se construye junto con la navbar/JS de cada frontend). */ :root { /* ============ Marca ============ */ --color-primary: #1a73e8; --color-primary-hover: #1765cc; --color-primary-active: #185abc; --color-primary-light: #e8f0fe; --color-on-primary: #ffffff; --color-secondary: #34a853; --color-secondary-hover: #2d9249; --color-secondary-active: #298238; --color-secondary-light: #e6f4ea; --color-on-secondary: #ffffff; --color-error: #ea4335; --color-error-hover: #d33b2c; --color-error-active: #b0281a; --color-error-light: #fce8e6; --color-on-error: #ffffff; --color-warning: #fbbc04; --color-warning-light: #fef7e0; --color-on-warning: #202124; --color-info: #1a73e8; --color-info-light: #e8f0fe; /* ============ Tipografía ============ */ --font-family-base: 'Google Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-size-display: 2.75rem; /* 44px */ --font-size-headline: 1.75rem; /* 28px */ --font-size-title: 1.25rem; /* 20px */ --font-size-subtitle: 1rem; /* 16px */ --font-size-body: 0.875rem; /* 14px */ --font-size-label: 0.8125rem; /* 13px */ --font-size-caption: 0.75rem; /* 12px */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --line-height-tight: 1.25; --line-height-base: 1.5; --line-height-relaxed: 1.7; /* ============ Espaciado (grid de 4px) ============ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ============ Bordes ============ */ --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-full: 999px; --border-width: 1px; /* ============ Elevación (sombras sutiles al estilo Material) ============ */ --shadow-sm: 0 1px 2px rgba(60, 64, 67, 0.15), 0 1px 3px rgba(60, 64, 67, 0.1); --shadow-md: 0 2px 6px rgba(60, 64, 67, 0.12), 0 4px 12px rgba(60, 64, 67, 0.08); --shadow-lg: 0 4px 12px rgba(60, 64, 67, 0.14), 0 8px 24px rgba(60, 64, 67, 0.1); --shadow-focus: 0 0 0 3px var(--color-primary-light); --shadow-focus-error: 0 0 0 3px var(--color-error-light); /* ============ Transiciones ============ */ --transition-fast: 120ms ease; --transition-base: 200ms ease; --transition-slow: 320ms ease; /* ============ Índices de apilamiento ============ */ --z-dropdown: 1000; --z-sticky: 1100; --z-navbar: 1200; --z-modal: 1300; /* --z-toast queda fuera de esta escala: updateBanner.css ya usa 9999 fijo */ /* ============ Superficies — modo claro (default) ============ */ --color-bg: #f8f9fa; --color-surface: #ffffff; --color-surface-variant: #f1f3f4; --color-border: #dadce0; --color-divider: #e8eaed; --color-text-primary: #202124; --color-text-secondary: #5f6368; --color-text-disabled: #9aa0a6; --color-text-on-dark-surface: #e8eaed; } /* ============ Superficies — modo oscuro (explícito vía data-theme) ============ */ :root[data-theme='dark'] { --color-bg: #1e1e1e; --color-surface: #2a2a2a; --color-surface-variant: #333333; --color-border: #444444; --color-divider: #3a3a3a; --color-text-primary: #e8eaed; --color-text-secondary: #b0b3b8; --color-text-disabled: #6f7276; --color-primary-light: #23334a; --color-secondary-light: #1e3324; --color-error-light: #3a2422; --color-warning-light: #3a2f14; --color-info-light: #23334a; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.35); }