:root { --primary: #E3000F; --secondary: #FFD600; --accent-green: #00B140; --accent-blue: #0057FF; --accent-orange: #FF6B00; --accent-magenta: #E91E8C; --accent-violet: #7B2FBE; --accent-cyan: #00C4CC; --primary-trans-20: rgba(227, 0, 15, 0.2); --primary-trans-50: rgba(227, 0, 15, 0.5); --base: #111111; --base-l-1: #444444; --base-l-2: #888888; --white: #FFFFFF; --white-trans-10: rgba(255, 255, 255, 0.1); --white-trans-30: rgba(255, 255, 255, 0.3); --white-trans-60: rgba(255, 255, 255, 0.6); --white-trans-90: rgba(255, 255, 255, 0.9); --black: #000000; --surface: #F5F5F5; --surface-dark: #1A1A1A; --space-xs: clamp(0.80rem, calc(0.80rem + 0.0022 * (100vw - 375px)), 1.00rem); --space-s: clamp(1.20rem, calc(1.20rem + 0.0033 * (100vw - 375px)), 1.50rem); --space-m: clamp(1.60rem, calc(1.60rem + 0.0044 * (100vw - 375px)), 2.00rem); --space-l: clamp(2.40rem, calc(2.40rem + 0.0067 * (100vw - 375px)), 3.00rem); --space-xl: clamp(3.60rem, calc(3.60rem + 0.0100 * (100vw - 375px)), 4.50rem); --space-xxl: clamp(5.40rem, calc(5.40rem + 0.0144 * (100vw - 375px)), 6.80rem); --space-section: clamp(4.00rem, calc(4.00rem + 0.0222 * (100vw - 375px)), 8.00rem); --bottom-nav-height: 64px; --text-xs: clamp(1.00rem, calc(1.00rem + 0.0011 * (100vw - 375px)), 1.10rem); --text-s: clamp(1.20rem, calc(1.20rem + 0.0011 * (100vw - 375px)), 1.30rem); --text-m: clamp(1.40rem, calc(1.40rem + 0.0022 * (100vw - 375px)), 1.60rem); --text-l: clamp(1.70rem, calc(1.70rem + 0.0022 * (100vw - 375px)), 1.90rem); --text-xl: clamp(2.00rem, calc(2.00rem + 0.0033 * (100vw - 375px)), 2.30rem); --h1: clamp(3.60rem, calc(3.60rem + 0.0122 * (100vw - 375px)), 5.00rem); --h2: clamp(2.80rem, calc(2.80rem + 0.0100 * (100vw - 375px)), 3.80rem); --h3: clamp(2.20rem, calc(2.20rem + 0.0078 * (100vw - 375px)), 3.00rem); --h4: clamp(1.80rem, calc(1.80rem + 0.0056 * (100vw - 375px)), 2.40rem); --h5: clamp(1.50rem, calc(1.50rem + 0.0033 * (100vw - 375px)), 1.90rem); --h6: clamp(1.20rem, calc(1.20rem + 0.0022 * (100vw - 375px)), 1.50rem);}