/* Design tokens — extracted from Canva on 2026-04-26. * Colors and fonts confirmed by client. * All other CSS files should consume these CSS variables. */ :root { /* ───── Brand colors ───── */ --mal-blue: #014584; /* primary */ --mal-blue-dark: #013466; --mal-blue-light: #05A3E2; /* secondary accent */ --mal-yellow: #F7C52C; /* CTA */ --mal-yellow-soft: #F6C93E; /* ───── Neutrals ───── */ --mal-white: #FFFFFF; --mal-cream: #F9F7F0; --mal-slate: #3C423E; --mal-navy: #0F1015; --mal-black: #000000; /* ───── Overlays ───── */ --mal-glass-light: rgba(255, 255, 255, 0.4); --mal-glass-thin: rgba(255, 255, 255, 0.15); --mal-glass-dark: rgba(19, 22, 32, 0.6); /* ───── Semantic ───── */ --mal-bg: var(--mal-white); --mal-bg-alt: var(--mal-cream); --mal-bg-dark: var(--mal-navy); --mal-text: var(--mal-navy); --mal-text-mute: var(--mal-slate); --mal-text-on-dark:var(--mal-white); --mal-link: var(--mal-blue); --mal-link-hover: var(--mal-blue-light); --mal-cta: var(--mal-yellow); --mal-cta-text: var(--mal-navy); /* ───── Typography ───── */ --mal-font-display: 'Bricolage Grotesque', 'Be Vietnam Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --mal-font-body-vi: 'Be Vietnam Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --mal-font-body-en: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* Default to VN body — overridden via [lang=en] on */ --mal-font-body: var(--mal-font-body-vi); /* Fluid type scale (mobile -> desktop) */ --mal-fs-300: clamp(0.812rem, 0.75rem + 0.25vw, 0.875rem); /* tiny */ --mal-fs-400: clamp(0.938rem, 0.875rem + 0.3vw, 1rem); /* body */ --mal-fs-500: clamp(1.063rem, 0.95rem + 0.5vw, 1.187rem); /* lead */ --mal-fs-600: clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem); /* h4 */ --mal-fs-700: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); /* h3 */ --mal-fs-800: clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem); /* h2 */ --mal-fs-900: clamp(2.25rem, 1.6rem + 3.5vw, 4rem); /* h1 / hero */ --mal-fs-1000: clamp(2.75rem, 1.8rem + 5vw, 5.25rem); /* hero giant */ /* Line heights */ --mal-lh-tight: 1.1; --mal-lh-snug: 1.25; --mal-lh-normal: 1.55; --mal-lh-loose: 1.7; /* ───── Spacing scale (8pt base) ───── */ --mal-sp-1: 4px; --mal-sp-2: 8px; --mal-sp-3: 12px; --mal-sp-4: 16px; --mal-sp-5: 24px; --mal-sp-6: 32px; --mal-sp-7: 48px; --mal-sp-8: 64px; --mal-sp-9: 96px; --mal-sp-10: 128px; /* ───── Layout ───── */ --mal-container-max: 1280px; --mal-container-pad: clamp(16px, 4vw, 48px); --mal-radius-sm: 6px; --mal-radius-md: 12px; --mal-radius-lg: 24px; --mal-radius-pill: 999px; /* ───── Shadows ───── */ --mal-shadow-sm: 0 1px 2px rgba(15, 16, 21, 0.08); --mal-shadow-md: 0 4px 14px rgba(15, 16, 21, 0.12); --mal-shadow-lg: 0 18px 40px rgba(15, 16, 21, 0.18); /* ───── Motion ───── */ --mal-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --mal-dur-fast: 160ms; --mal-dur-normal: 280ms; --mal-dur-slow: 480ms; /* ───── Z-index ───── */ --mal-z-base: 1; --mal-z-overlay: 10; --mal-z-header: 100; --mal-z-modal: 1000; } /* English pages flip the body font */ html[lang='en'], html[lang^='en-'] { --mal-font-body: var(--mal-font-body-en); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }