/* ============================================ MONLIS Website - CSS Variables Design System based on Figma ============================================ */:root {/* ========================================== COLORS ========================================== */ /* Primary Colors */ --color-white:#FFFFFF;--color-black:#000000;--color-mine-shaft:#232323;--color-rose-white:#FFF7F7;/* Grey Scale */ --color-grey-14:#232323;--color-grey-98:#FFF7F7;/* Overlay Colors */ --overlay-dark:rgba(0,0,0,0.5);--overlay-light:rgba(255,255,255,0.1);/* ========================================== TYPOGRAPHY - Font Families ========================================== */ --font-primary:'Josefin Sans',sans-serif;--font-secondary:'Montserrat',sans-serif;/* ========================================== TYPOGRAPHY - Font Weights ========================================== */ --font-weight-thin:100;--font-weight-light:300;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;/* ========================================== TYPOGRAPHY - Font Sizes ========================================== */ --font-size-13:13px;--font-size-15:15px;--font-size-17:17px;--font-size-22:22px;--font-size-50:50px;--font-size-70:70px;--font-size-130:130px;/* ========================================== TYPOGRAPHY - Line Heights ========================================== */ --line-height-15:15px;--line-height-20:20.4px;--line-height-26:26px;--line-height-26-4:26.4px;--line-height-60:60px;--line-height-84:84px;--line-height-156:156px;/* ========================================== SPACING ========================================== */ --spacing-xxs:4px;--spacing-xs:5px;--spacing-sm:10px;--spacing-md:20px;--spacing-lg:40px;--spacing-xl:50px;--spacing-xxl:100px;/* ========================================== LAYOUT ========================================== */ --container-padding:100px;--container-max-width:1920px;--header-height:77px;--footer-height:121px;/* ========================================== BORDER RADIUS ========================================== */ --radius-sm:15px;--radius-md:30px;/* ========================================== TRANSITIONS ========================================== */ --transition-fast:0.2s ease;--transition-normal:0.3s ease;--transition-slow:0.5s ease;/* ========================================== Z-INDEX LAYERS ========================================== */ --z-header:100;--z-overlay:50;--z-content:10;--z-background:1;/* ========================================== BLUR EFFECTS ========================================== */ --blur-light:1.5px;--blur-medium:10px;}/* ============================================ RESPONSIVE BREAKPOINTS (for reference) - Mobile:< 768px - Tablet:768px - 1024px - Desktop:1024px - 1440px - Large Desktop:>1440px ============================================ */