:root { /* ========================================================= CORPORATIUS COLORS Basats en COLORS.md (APROVAT) ========================================================= */ --fsm-primary: #0F4C9A; /* Blau FSM Principal */ --fsm-primary-dark: #0A2540; /* Blau FSM Fosc */ --fsm-primary-light: #EAF3FF; /* Blau FSM Clar */ --fsm-accent: #F58A1F; /* Taronja FSM */ --fsm-accent-light: #FFB15A; /* Taronja Clar */ /* ========================================================= SYSTEM COLORS Sensibilitats: Èxit, Alerta, Error, Informació ========================================================= */ --fsm-success: #22C55E; /* Èxit (verd) */ --fsm-warning: #F59E0B; /* Alerta (groc) */ --fsm-danger: #DC2626; /* Error (vermell) */ --fsm-info: #3B82F6; /* Informació (blau clar) */ /* ========================================================= NEUTRAL SCALE (Grises) ========================================================= */ --fsm-background: #F8FAFC; /* Fons principal (ultralleuger) */ --fsm-card: #FFFFFF; /* Fons card */ --fsm-border: #E2E8F0; /* Separadors / Borders */ --fsm-text: #1E293B; /* Text principal (fosca) */ --fsm-text-secondary: #64748B; /* Text secundari (gris) */ --fsm-text-tertiary: #94A3B8; /* Text terciari (més gris) */ /* ========================================================= TYPOGRAPHY SYSTEM Font principal: Inter, Segoe UI, system-ui, sans-serif ========================================================= */ /* Font Sizes */ --fsm-text-xs: 0.75rem; /* 12px */ --fsm-text-sm: 0.875rem; /* 14px */ --fsm-text-base: 1rem; /* 16px (default) */ --fsm-text-lg: 1.125rem; /* 18px */ --fsm-text-xl: 1.25rem; /* 20px */ --fsm-text-2xl: 1.5rem; /* 24px */ --fsm-text-3xl: 1.875rem; /* 30px */ --fsm-text-4xl: 2.25rem; /* 36px */ /* Font Weights */ --fsm-font-normal: 400; --fsm-font-medium: 500; --fsm-font-semibold: 600; --fsm-font-bold: 700; /* Line Heights */ --fsm-line-tight: 1.2; --fsm-line-normal: 1.5; --fsm-line-relaxed: 1.75; --fsm-line-loose: 2; /* ========================================================= SPACING SCALE Sistema modular 8px base ========================================================= */ --fsm-space-xs: 4px; /* 0.25rem */ --fsm-space-sm: 8px; /* 0.5rem */ --fsm-space-md: 16px; /* 1rem */ --fsm-space-lg: 24px; /* 1.5rem */ --fsm-space-xl: 32px; /* 2rem */ --fsm-space-2xl: 48px; /* 3rem */ --fsm-space-3xl: 64px; /* 4rem */ /* ========================================================= BORDER RADIUS Escaleta: petit, normal, gran, molt gran ========================================================= */ --fsm-radius-sm: 8px; /* Elements petits */ --fsm-radius-md: 12px; /* Defecte per components */ --fsm-radius-lg: 16px; /* Cards i grans */ --fsm-radius-xl: 24px; /* Herois i seccions */ --fsm-radius-full: 9999px; /* Totalment arrodonit */ /* ========================================================= SHADOWS (Ombres suaus, premium) ========================================================= */ --fsm-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --fsm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); --fsm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06); --fsm-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08); --fsm-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.10); /* ========================================================= LAYOUT DIMENSIONS ========================================================= */ --fsm-sidebar-width: 280px; /* Amplada normal */ --fsm-sidebar-width-compact: 80px; /* Amplada tablet */ --fsm-header-height: 70px; /* Altura capçalera */ --fsm-container-max: 1600px; /* Amplada content màxima */ /* ========================================================= TRANSITIONS & ANIMATIONS ========================================================= */ --fsm-transition: all 0.2s ease; --fsm-transition-fast: all 0.15s ease; --fsm-transition-slow: all 0.3s ease; /* ========================================================= GRADIENTS OFICIALS ========================================================= */ --fsm-gradient-primary: linear-gradient(135deg, var(--fsm-primary) 0%, var(--fsm-primary-dark) 100%); --fsm-gradient-accent: linear-gradient(135deg, var(--fsm-accent) 0%, var(--fsm-accent-light) 100%); /* ========================================================= OPACITY ========================================================= */ --fsm-opacity-none: 0; --fsm-opacity-5: 0.05; --fsm-opacity-10: 0.1; --fsm-opacity-20: 0.2; --fsm-opacity-30: 0.3; --fsm-opacity-50: 0.5; --fsm-opacity-75: 0.75; --fsm-opacity-100: 1; /* ========================================================= LANDING-SPECIFIC COLOR VARIATIONS Opcions de taronja/blanc per a landing amb opacitat ========================================================= */ --fsm-white-alpha-6: rgba(255, 255, 255, 0.06); --fsm-white-alpha-8: rgba(255, 255, 255, 0.08); --fsm-white-alpha-10: rgba(255, 255, 255, 0.10); --fsm-white-alpha-12: rgba(255, 255, 255, 0.12); --fsm-white-alpha-18: rgba(255, 255, 255, 0.18); --fsm-white-alpha-28: rgba(255, 255, 255, 0.28); --fsm-white-alpha-30: rgba(255, 255, 255, 0.30); --fsm-white-alpha-55: rgba(255, 255, 255, 0.55); --fsm-white-alpha-70: rgba(255, 255, 255, 0.70); --fsm-white-alpha-82: rgba(255, 255, 255, 0.82); --fsm-white-alpha-85: rgba(255, 255, 255, 0.85); /* Landing backgrounds (blaus foscos personalitzats) */ --fsm-landing-dark-primary: #0d2c5e; /* Blau landing header superior */ --fsm-landing-dark-secondary: #061a44; /* Blau landing header inferior */ --fsm-landing-overlay-dark: rgba(5, 20, 52, 0.94); --fsm-landing-overlay-darker: rgba(3, 14, 40, 0.97); --fsm-landing-footer-dark: #061a44; /* Landing light backgrounds */ --fsm-landing-light-bg: #edf4f9; --fsm-landing-light-subtle: #eef2f7; --fsm-landing-light-gradient: #d9e1ea; /* RGB values for rgba() with opacity (needed for badges, etc.) */ --fsm-success-rgb: 34, 197, 94; /* #22C55E */ --fsm-warning-rgb: 245, 158, 11; /* #F59E0B */ --fsm-danger-rgb: 220, 38, 38; /* #DC2626 */ --fsm-info-rgb: 59, 130, 246; /* #3B82F6 */ --fsm-primary-rgb: 15, 76, 154; /* #0F4C9A */ --fsm-accent-rgb: 245, 138, 31; /* #F58A1F */ }