/* ============================================= MODUS DIGITAL - DESIGN TOKENS ============================================= Single source of truth for all design values. Every hardcoded value in component files should reference a token from this file. ============================================= */ :root { /* ----------------------------------------- COLORS: Brand ----------------------------------------- */ --md-color-primary: #218AAB; --md-color-primary-hover: #07B3E9; --md-color-primary-focus: #2498BC; --md-color-primary-rgb: 33, 138, 171; /* ----------------------------------------- COLORS: Dark ----------------------------------------- */ --md-color-dark: #272E36; --md-color-dark-rgb: 39, 46, 54; --md-color-modal: #242A34; /* ----------------------------------------- COLORS: Accent ----------------------------------------- */ --md-color-accent: #FFFF00; --md-color-accent-soft: #FFFE55; --md-color-accent-hover: #E6E600; /* ----------------------------------------- COLORS: Blues ----------------------------------------- */ --md-color-blue-deep: #1E6091; --md-color-blue-medium: #2870C3; --md-color-blue-teal: #439AAA; --md-color-blue-teal-light: #60C1DF; --md-color-blue-overlay: #376B8E; --md-color-blue-feature-bg: #DFF9FF; /* ----------------------------------------- COLORS: Pink / Danger ----------------------------------------- */ --md-color-pink: #ED1163; --md-color-pink-hover: #FF2A6F; --md-color-pink-light: #FFEAF1; --md-color-pink-gradient: linear-gradient(163.12deg, #FFEAF1 11.19%, #FFD4E2 101.03%); /* ----------------------------------------- COLORS: Neutrals ----------------------------------------- */ --md-color-white: #FFFFFF; --md-color-gray-50: #F6F6F6; --md-color-gray-100: #F1F1F1; --md-color-gray-150: #ECF2F6; --md-color-gray-200: #E0E0E0; --md-color-gray-300: #DBDBDB; --md-color-gray-400: #9CA3AF; --md-color-gray-500: #7A828E; --md-color-gray-600: #5A6B7C; --md-color-gray-700: #4C606E; --md-color-gray-800: #3B454F; --md-color-gray-900: #353C44; --md-color-black: #000000; /* ----------------------------------------- COLORS: Validation ----------------------------------------- */ --md-color-success: #5FA955; --md-color-success-bg: #EFFEF4; --md-color-error: #CC3158; --md-color-error-bg: #FCECF3; --md-color-error-ring: rgba(204, 49, 88, 0.25); --md-color-error-bootstrap: #dc3545; /* ----------------------------------------- COLORS: Selection ----------------------------------------- */ --md-color-selection-bg: var(--md-color-accent); --md-color-selection-text: var(--md-color-dark); /* ----------------------------------------- COLORS: Gradients ----------------------------------------- */ --md-gradient-overlay-dark: linear-gradient(188deg, rgba(39, 46, 54, 0) 0%, rgba(39, 46, 54, 0.996) 100%, #272E36 100%); --md-gradient-overlay-hover: linear-gradient(188deg, rgba(39, 46, 54, 0) 0%, #1E6091 100%, #0077ff 100%); --md-gradient-card-hover: linear-gradient(180deg, rgba(55, 107, 142, 0) 0%, rgba(55, 107, 142, 0.6) 100%); --md-gradient-carousel-bg: linear-gradient(to right, #253848 0, #253848 33%, #244057 33%, #244057 66%, #234663 66%, #234663 100%); --md-gradient-video-overlay: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0) 100%); --md-gradient-theme-light: linear-gradient(210.81deg, #60C1DF 0%, #228AAB 100%); --md-gradient-theme-medium: linear-gradient(210.81deg, #4195F8 0%, #276EC2 100%); --md-gradient-theme-dark: linear-gradient(210.81deg, #439AAA 0%, #206171 100%); /* ----------------------------------------- TYPOGRAPHY: Font families ----------------------------------------- */ --md-font-body: 'Roboto', sans-serif; --md-font-display: ClashDisplay-Bold, sans-serif; --md-font-accent: 'Bebas Neue', sans-serif; /* ----------------------------------------- TYPOGRAPHY: Font sizes ----------------------------------------- */ --md-font-size-xs: 12px; --md-font-size-sm: 14px; --md-font-size-base: 17px; --md-font-size-md: 18px; --md-font-size-lg: 22px; --md-font-size-xl: 28px; --md-font-size-2xl: 32px; --md-font-size-3xl: 41px; --md-font-size-4xl: 48px; /* ----------------------------------------- TYPOGRAPHY: Line heights ----------------------------------------- */ --md-line-height-tight: 1.05; --md-line-height-snug: 1.2; --md-line-height-normal: 1.4; --md-line-height-relaxed: 1.6; --md-line-height-base: 27px; /* ----------------------------------------- TYPOGRAPHY: Font weights ----------------------------------------- */ --md-font-weight-light: 300; --md-font-weight-regular: 400; --md-font-weight-semibold: 600; --md-font-weight-bold: 700; --md-font-weight-black: 900; /* ----------------------------------------- TYPOGRAPHY: Fluid scales (clamp) ----------------------------------------- */ --md-font-fluid-hero: clamp(2.25rem, 0.643rem + 4.286vw, 4.5rem); --md-font-fluid-h1: clamp(2rem, 0.571rem + 3.81vw, 4rem); --md-font-fluid-h2: clamp(1.725rem, 1.529rem + 0.524vw, 2rem); --md-font-fluid-section: clamp(2rem, 1.554rem + 1.19vw, 2.625rem); --md-font-fluid-eyebrow: clamp(1.375rem, 1.107rem + 0.714vw, 1.75rem); --md-font-fluid-subtitle: clamp(1.5rem, 1.143rem + 0.952vw, 2rem); --md-font-fluid-body: clamp(1.125rem, 1.036rem + 0.238vw, 1.25rem); --md-font-fluid-intro: clamp(1.25rem, 1.161rem + 0.238vw, 1.375rem); --md-font-fluid-caption: clamp(1.25rem, 1.071rem + 0.476vw, 1.5rem); --md-font-fluid-panel: clamp(1.375rem, 0.75rem + 1.667vw, 2.25rem); /* ----------------------------------------- SPACING (4px base grid) ----------------------------------------- */ --md-space-1: 4px; --md-space-2: 8px; --md-space-3: 12px; --md-space-4: 16px; --md-space-5: 20px; --md-space-6: 24px; --md-space-7: 28px; --md-space-8: 32px; --md-space-10: 40px; --md-space-12: 48px; --md-space-14: 56px; --md-space-16: 64px; --md-space-20: 80px; --md-space-24: 96px; --md-space-32: 128px; /* ----------------------------------------- BORDER RADIUS ----------------------------------------- */ --md-radius-xs: 5px; --md-radius-sm: 8px; --md-radius-md: 12px; --md-radius-lg: 16px; --md-radius-xl: 17px; --md-radius-2xl: 20px; --md-radius-3xl: 24px; --md-radius-4xl: 36px; --md-radius-pill: 9999px; /* ----------------------------------------- SHADOWS ----------------------------------------- */ --md-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --md-shadow-md: 0 2px 16px rgba(0, 0, 0, 0.07); --md-shadow-lg: 0 6px 28px rgba(0, 0, 0, 0.13); --md-shadow-navbar: 0 8px 12px 0 rgba(0, 0, 0, 0.13); --md-shadow-card: 0px 3px 6px rgba(0, 0, 0, 0.12); --md-shadow-card-hover: 0 0 20px #ededed; --md-shadow-dropdown: 0px 4px 16px rgba(0, 0, 0, 0.15); --md-shadow-image: 0 0 33px #cfcfcf; --md-shadow-cookie: 0 2px 20px 0 rgba(25, 25, 25, 0.24); --md-shadow-carousel: 0 2px 30px 0 #DBDBDB; --md-shadow-focus-primary: 0 0 0 0.25rem rgba(96, 197, 255, 0.5); --md-shadow-focus-accent: 0 0 0 0.25rem rgba(255, 255, 0, 0.5); --md-shadow-focus-pink: 0 0 0 0.25rem rgba(237, 17, 99, 0.5); --md-shadow-focus-warning: 0 0 0 0.25rem rgba(255, 254, 85, 0.5); /* ----------------------------------------- TRANSITIONS ----------------------------------------- */ --md-transition-fast: 0.15s ease; --md-transition-base: 0.2s ease; --md-transition-medium: 0.3s ease; --md-transition-slow: 0.5s ease; --md-transition-overlay: 0.55s ease-in-out; /* ----------------------------------------- LAYOUT ----------------------------------------- */ --md-container-max: 1440px; --md-content-max-width: 56rem; --md-navbar-padding: 28px; --md-navbar-padding-scroll: 23px; /* ----------------------------------------- Z-INDEX ----------------------------------------- */ --md-z-base: 1; --md-z-overlay: 2; --md-z-caption: 3; --md-z-sticky: 10; --md-z-cookie: 999; --md-z-modal: 1050; /* ----------------------------------------- BREAKPOINTS (reference only - cannot be used in media queries, but documented here as the canonical breakpoint system) ----------------------------------------- */ /* sm: 576px - Small devices */ /* md: 768px - Tablets */ /* lg: 992px - Desktops */ /* xl: 1200px - Large desktops */ /* xxl: 1440px - Extra large */ }