@layer reset, tokens, base, utilities, components, overrides, legacy; @layer tokens { :root { /* ### COLORS ### */ /* --- Absolute colors --- */ --black: #000000; --white: #ffffff; --white-10: rgba(255, 255, 255, 0.10); --white-50: rgba(255, 255, 255, 0.50); --white-75: rgba(255, 255, 255, 0.75); --white-95: rgba(255, 255, 255, 0.95); /* --- Greys --- */ --grey: #696969; --text-muted-color: #696969; --dark-grey: #333333; --text-color: #333333; --light-grey: #a3abb1; --ex-light-grey: #dadada; --x-ex-light-grey: #f6f6f6; --border-color: #f6f6f6; /* --- Brand Palette --- */ --primary-color: #00539f; /* Blue 700 - main brand blue */ --dark-color: #002955; /* Blue 900 - dark blue */ --secondary-color: #1268b2; /* Blue 300 - lighter secondary blue */ --secondary-color-light:#65addf; /* Blue 200 - light accent blue */ --accent-color: #fdb813; /* Yellow accent */ /* --- Primary transparencies --- */ --primary-color-05: rgba(0, 83, 159, 0.05); --primary-color-10: rgba(0, 83, 159, 0.10); --primary-color-20: rgba(0, 83, 159, 0.20); --primary-color-50: rgba(0, 83, 159, 0.50); --primary-color-75: rgba(0, 83, 159, 0.75); --primary-color-90: rgba(0, 83, 159, 0.90); /* --- Dark transparencies --- */ --dark-color-05: rgba(0, 41, 85, 0.05); --dark-color-10: rgba(0, 41, 85, 0.10); --dark-color-20: rgba(0, 41, 85, 0.20); --dark-color-50: rgba(0, 41, 85, 0.50); --dark-color-75: rgba(0, 41, 85, 0.75); --dark-color-90: rgba(0, 41, 85, 0.90); /* --- Secondary transparencies --- */ --secondary-color-05: rgba(72, 134, 198, 0.05); --secondary-color-10: rgba(72, 134, 198, 0.10); --secondary-color-20: rgba(72, 134, 198, 0.20); --secondary-color-50: rgba(72, 134, 198, 0.50); --secondary-color-75: rgba(72, 134, 198, 0.75); --secondary-color-90: rgba(72, 134, 198, 0.90); /* --- Secondary light transparencies --- */ --secondary-color-light-05: rgba(101, 173, 223, 0.05); --secondary-color-light-10: rgba(101, 173, 223, 0.10); --secondary-color-light-20: rgba(101, 173, 223, 0.20); --secondary-color-light-50: rgba(101, 173, 223, 0.50); --secondary-color-light-75: rgba(101, 173, 223, 0.75); --secondary-color-light-90: rgba(101, 173, 223, 0.90); /* ### TYPOGRAPHY ### */ /* --- Font Families --- */ --font-family-display: "Poppins", "Segoe UI", Arial, sans-serif; /* Used for large titles (H1, hero sections) */ --font-family-heading: "Poppins", "Segoe UI", Arial, sans-serif; /* Used for main headings (H2–H3) */ --font-family-subhead: "Poppins", "Segoe UI", Arial, sans-serif; /* Used for smaller headings (H4–H6) */ --font-family-body: "Poppins", "Segoe UI", Arial, sans-serif; /* Used for paragraphs and body text */ --font-family-caption: "Poppins", "Segoe UI", Arial, sans-serif; /* Used for captions, labels, small text */ /* --- Font Weights --- */ --font-weight-light: 300; /* Thin / Light */ --font-weight-regular: 400; /* Regular */ --font-weight-medium: 500; /* Medium */ --font-weight-semibold: 600; /* Semi-bold */ --font-weight-bold: 700; /* Bold */ /* --- Font Sizes (base 16px = 1rem) --- */ /* Headings approx. 1.25 ratio */ /* Landing / Homepage */ --font-size-lp-display: 2.5rem; /* 40px */ --font-size-lp-h2: 2rem; /* 32px */ --font-size-lp-h3: 1.75rem; /* 28px */ --font-size-lp-text-l: 1.125rem; /* 18px */ --font-size-lp-text: 1rem; /* 16px */ --font-size-lp-text-s: 0.875rem; /* 14px */ --font-size-lp-text-xs: 0.8125rem;/* 13px */ --font-size-caption: 0.75rem; /* 12px */ /* Articles */ --font-size-h1: 2rem; /* 32px */ --font-size-h2: 1.5rem; /* 24px */ --font-size-h3: 1.25rem; /* 20px */ --font-size-h4: 1rem; /* 16px - same as body */ --font-size-h5: 1rem; /* 16px - same as body */ --font-size-h6: 1rem; /* 16px - same as body */ --font-size-text-l: 1.125rem; /* 18px */ --font-size-body: 1rem; /* 16px */ --font-size-text-s: 0.875rem; /* 14px */ --font-size-text-xs: 0.8125rem;/* 13px */ /* --- Line Heights --- */ --line-height-tight: 1.2; /* for headings */ --line-height-normal: 1.5; /* for paragraphs */ --line-height-loose: 1.75; /* for longer text blocks */ /* --- Letter Spacing --- */ --letter-spacing-normal: 0; --letter-spacing-wide: 0.05em; /* for captions or buttons */ --letter-spacing-tight: -0.01em; /* for large titles */ /* --- Paragraph Spacing --- */ --paragraph-spacing: 1.25em; /* ### LAYOUT & BREAKPOINTS ### */ /* --- Container --- */ --max-width: 1200px; /* Maximum width for main content containers */ /* ### SPACING ### */ /* 4px scale */ --spacing-0: 0; /* 0px - none */ --spacing-1: 0.25rem; /* 4px */ --spacing-2: 0.5rem; /* 8px */ --spacing-3: 0.75rem; /* 12px */ --spacing-4: 1rem; /* 16px */ --spacing-5: 1.25rem; /* 20px */ --spacing-6: 1.5rem; /* 24px */ --spacing-7: 1.75rem; /* 28px */ --spacing-8: 2rem; /* 32px */ --spacing-10: 2.5rem; /* 40px */ --spacing-12: 3rem; /* 48px */ --spacing-14: 3.5rem; /* 56px */ --spacing-16: 4rem; /* 64px */ --spacing-20: 5rem; /* 80px */ --spacing-24: 6rem; /* 96px */ /* ### ELEVATION & SHADOWS ### */ --shadow-sm: rgba(0, 0, 0, 0.08) 0px 1px 3px; /* light elements */ --shadow-md: rgba(0, 0, 0, 0.10) 0px 4px 6px; /* cards, modals */ --shadow-lg: rgba(100, 100, 111, 0.15) 0px 5px 25px 0px; /* base site shadow */ --shadow-hover: rgba(100, 100, 111, 0.25) 0px 7px 29px 0px; /* hover state shadow */ /* Backward compatibility (keep your original names) */ --box-shadow: var(--shadow-lg); --box-shadow-hover: var(--shadow-hover); /* ### COMPONENT HEIGHTS ### */ /* Slider heights */ --slider-height-mob: 300px; --slider-height-small: 350px; --slider-height-large: 400px; /* Hero heights */ --hero-height-mob: 250px; --hero-height-small: 300px; --hero-height-large: 350px; /* ### RADIUS & TRANSITIONS ### */ --radius-sm: 4px; /* for buttons, small cards */ --radius-md: 8px; /* for modals, containers */ --radius-lg: 16px; /* for larger blocks or highlights */ --transition-fast: 0.15s ease-in-out; --transition-medium: 0.30s ease-in-out; --transition-slow: 0.50s ease-in-out; /* --- Breakpoints --- */ /* 1200px; Desktops */ /* 900px; Tablets landscape / small laptops */ /* 768px; Tablets portrait */ /* 690px; Small phones / special cases */ /* 550px; Extra small devices (phones) */ } /* :root */ } /* @layer tokens */