:root {
    --color-black: #000000;
    --color-white: #ffffff;
    --color-dark-gray: #4b4b4b;
    --color-gray: #cacaca;
    --color-light-gray: #fafafa;
    --color-gray-2: #e1e1e1;
    --color-gray-3: #c3c3c3;
    --color-navy: #1a456f;
    --color-navy-hovered: #245e96;
    --color-red: #f64c4c;

    --color-text-strong: #101828;
    --color-text-muted: #344054;
    --color-text-subtle: #475467;
    --color-border-subtle: #eaecf0;
    --color-border-default: #d0d5dd;

    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    --space-xxs: 2px;
    --space-md: 8px;
    --space-lg: 12px;
    --space-xl: 16px;
    --space-2xl: 20px;
    --space-4xl: 32px;
    --space-7xl: 64px;
    --space-8xl: 80px;

    --font-family-base: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-family-caption: 'Poppins', 'Inter', system-ui, sans-serif;

    --font-size-h1: 30px;
    --font-size-h2: 24px;
    --font-size-h3: 20px;
    --font-size-title: 18px;
    --font-size-subtitle: 16px;
    --font-size-body: 14px;
    --font-size-caption: 12px;

    --line-height-h1: 38px;
    --line-height-h2: 32px;
    --line-height-h3: 28px;
    --line-height-title: 26px;
    --line-height-subtitle: 24px;
    --line-height-body: 22px;
    --line-height-caption: 18px;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-elevation-1: 0 1px 1px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-elevation-2: 0 1px 4px rgba(0, 0, 0, 0.04), 0 4px 10px rgba(0, 0, 0, 0.08);
    --shadow-elevation-3: 0 2px 20px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(0, 0, 0, 0.08);
    --shadow-elevation-4: 0 8px 20px rgba(0, 0, 0, 0.06), 0 24px 60px rgba(0, 0, 0, 0.12);

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
}