/** * RASTRAR SYSTEM - VARIABLES CSS * Única fuente de verdad para colores, tipografía y espaciado. * Todos los demás CSS deben usar SOLO estas variables. * ───────────────────────────────────────────────────────── * Para cambiar el tema del sistema, editar SOLO este archivo. */ /* ══════════════════════════════════════════ MODO OSCURO (por defecto) ══════════════════════════════════════════ */ :root { /* BRAND */ --primary: #FF6B35; --primary-dark: #E55A25; --primary-light: rgba(255, 107, 53, 0.15); --primary-lighter: rgba(255, 107, 53, 0.10); --primary-lightest: rgba(255, 107, 53, 0.05); --primary-shadow: rgba(255, 107, 53, 0.40); --primary-glow: rgba(255, 107, 53, 0.60); --secondary: #F7931E; --secondary-light: rgba(247, 147, 30, 0.15); --secondary-lighter: rgba(247, 147, 30, 0.10); --accent: #FDB833; /* FONDOS */ --bg-base: #1A1A2E; /* fondo principal */ --bg-deeper: #0F0F1E; /* fondo más oscuro */ --bg-surface: #16213E; /* tarjetas / panels */ --bg-card: rgba(255,255,255,0.05); --bg-card-hover: rgba(255,255,255,0.08); --bg-input: rgba(255,255,255,0.06); --bg-modal: rgba(26,26,46,0.98); /* TEXTO */ --text-primary: #FFFFFF; --text-secondary: #9CA3AF; --text-muted: #6B7280; --text-label: #9CA3AF; /* labels en forms y modales */ --text-placeholder: rgba(255,255,255,0.30); --text-code: #FDB833; /* BORDES */ --border-subtle: rgba(255,255,255,0.08); --border-normal: rgba(255,255,255,0.15); --border-strong: rgba(255,255,255,0.25); --border-primary: rgba(255, 107, 53, 0.35); --border-focus: #FF6B35; /* SEMÁNTICOS */ --success: #10B981; --success-bg: rgba(16,185,129,0.15); --success-border: rgba(16,185,129,0.40); --warning: #F7931E; --warning-bg: rgba(247,147,30,0.15); --danger: #DC2626; --danger-bg: rgba(220,38,38,0.15); --danger-border: rgba(220,38,38,0.40); --info: #3B82F6; --info-bg: rgba(59,130,246,0.15); --info-border: rgba(59,130,246,0.35); /* LEGADO (no usar en código nuevo, solo compatibilidad) */ --dark: #1A1A2E; --darker: #0F0F1E; --dark-blue: #16213E; --light: #FFF5E6; --white: #FFFFFF; --btn-text: #ffffff; /* texto en botones con fondo de color */ --gray: #9CA3AF; --gray-dark: #6B7280; --gray-light: #D1D5DB; --white-transparent-05: rgba(255,255,255,0.05); --white-transparent-08: rgba(255,255,255,0.08); --white-transparent-10: rgba(255,255,255,0.10); --white-transparent-12: rgba(255,255,255,0.12); --white-transparent-15: rgba(255,255,255,0.15); --white-transparent-20: rgba(255,255,255,0.20); --white-transparent-30: rgba(255,255,255,0.30); --white-transparent-40: rgba(255,255,255,0.40); --black-transparent-30: rgba(0,0,0,0.30); --black-transparent-40: rgba(0,0,0,0.40); --black-transparent-50: rgba(0,0,0,0.50); --black-transparent-80: rgba(0,0,0,0.80); --label-text: #9CA3AF; /* TIPOGRAFÍA */ --font-xs: 11px; --font-sm: 12px; --font-md: 14px; --font-lg: 16px; --font-xl: 28px; --font-2xl: 32px; --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold:600; --font-bold: 700; --font-extrabold:800; /* ESPACIADO */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 20px; --spacing-2xl: 24px; --spacing-3xl: 32px; /* RADIOS */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 30px; /* legado */ --border-radius-sm: 8px; --border-radius-md: 12px; --border-radius-lg: 16px; --border-radius-xl: 20px; --border-radius-2xl: 24px; --border-radius-full:30px; /* SOMBRAS */ --shadow-sm: 0 4px 15px; --shadow-md: 0 8px 25px; --shadow-lg: 0 10px 30px; --shadow-xl: 0 15px 40px; --shadow-card: 0 4px 20px rgba(0,0,0,0.3); /* TRANSICIONES */ --transition-fast: 0.2s; --transition-normal: 0.3s; --transition-slow: 0.4s; /* BLUR */ --blur-sm: 10px; --blur-md: 20px; /* OPACIDADES */ --opacity-05: 0.05; --opacity-08: 0.08; --opacity-10: 0.1; --opacity-12: 0.12; --opacity-15: 0.15; --opacity-20: 0.2; --opacity-25: 0.25; --opacity-30: 0.3; --opacity-40: 0.4; --opacity-50: 0.5; --opacity-60: 0.6; --opacity-80: 0.8; --opacity-95: 0.95; --opacity-98: 0.98; } /* ══════════════════════════════════════════ MODO CLARO Solo redefinir lo que cambia. ══════════════════════════════════════════ */ [data-theme="light"] { /* FONDOS */ --bg-base: #FFFFFF; --bg-deeper: #F8F9FA; --bg-surface: #F0F2F5; --bg-card: #FFFFFF; --bg-card-hover: #F5F5F5; --bg-input: rgba(0,0,0,0.04); --bg-modal: rgba(255,255,255,0.98); /* TEXTO */ --text-primary: #1A1A2E; --text-secondary: #4A5568; --text-muted: #718096; --text-label: #4A5568; --text-placeholder: rgba(0,0,0,0.35); --text-code: #C05621; /* BORDES */ --border-subtle: rgba(0,0,0,0.06); --border-normal: rgba(0,0,0,0.12); --border-strong: rgba(0,0,0,0.20); /* SEMÁNTICOS - más saturados en claro */ --success-bg: rgba(16,185,129,0.12); --danger: #C81E1E; --danger-bg: rgba(220,38,38,0.10); --info-bg: rgba(59,130,246,0.10); --warning-bg: rgba(247,147,30,0.12); /* LEGADO */ --dark: #FFFFFF; --darker: #F8F9FA; --dark-blue: #F0F0F0; --light: #1A1A2E; --white: #2D3748; --btn-text: #ffffff; /* texto en botones con fondo de color */ --gray: #4A5568; --gray-dark: #2D3748; --gray-light: #718096; --white-transparent-05: rgba(0,0,0,0.03); --white-transparent-08: rgba(0,0,0,0.06); --white-transparent-10: rgba(0,0,0,0.08); --white-transparent-12: rgba(0,0,0,0.10); --white-transparent-15: rgba(0,0,0,0.12); --white-transparent-20: rgba(0,0,0,0.15); --white-transparent-30: rgba(0,0,0,0.25); --white-transparent-40: rgba(0,0,0,0.35); --black-transparent-30: rgba(0,0,0,0.15); --black-transparent-40: rgba(0,0,0,0.20); --black-transparent-50: rgba(0,0,0,0.25); --black-transparent-80: rgba(0,0,0,0.40); --label-text: #4A5568; }