@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
    /* Color Palette - Core Brands */
    --color-primary: #2563eb;
    --color-primary-dark: #004ac6;
    --color-primary-light: #eff6ff;
    --color-secondary: #1e293b;
    --color-tertiary: #64748b;
    --color-neutral: #f8fafc;
    --color-white: #ffffff;
    
    /* Design Tokens from DESIGN.md YAML */
    --surface: #f7f9fb;
    --surface-dim: #d8dadc;
    --surface-bright: #f7f9fb;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f2f4f6;
    --surface-container: #eceef0;
    --surface-container-high: #e6e8ea;
    --surface-container-highest: #e0e3e5;
    
    --on-surface: #191c1e;
    --on-surface-variant: #434655;
    --inverse-surface: #2d3133;
    --inverse-on-surface: #eff1f3;
    
    --outline: #737686;
    --outline-variant: #c3c6d7;
    
    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #93000a;

    /* Typography families */
    --font-headings: 'Plus Jakarta Sans', sans-serif;
    --font-ui: 'Inter', sans-serif;

    /* Rounded corner shapes */
    --rounded-sm: 0.125rem;       /* 2px */
    --rounded-default: 0.25rem;   /* 4px - buttons, inputs */
    --rounded-md: 0.375rem;        /* 6px */
    --rounded-lg: 0.5rem;          /* 8px - cards, preview */
    --rounded-xl: 0.75rem;         /* 12px */
    --rounded-full: 9999px;        /* pills */

    /* Spacing system (8px linear scale) */
    --space-base: 8px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;
    --space-xxxl: 64px;
    
    --container-max: 1200px;
    --gutter: 24px;

    /* Elevation and Depth (Ambient Shadows) */
    --shadow-low: 0px 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0px 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-high: 0px 10px 25px rgba(0, 0, 0, 0.08);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
}

/* Global design system classes for Typography */
.text-headline-xl {
    font-family: var(--font-headings);
    font-size: 40px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: -0.02em;
}

.text-headline-xl-mobile {
    font-family: var(--font-headings);
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: -0.02em;
}

.text-headline-lg {
    font-family: var(--font-headings);
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: -0.01em;
}

.text-headline-md {
    font-family: var(--font-headings);
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
}

.text-body-lg {
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
}

.text-body-md {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.text-body-sm {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.text-label-bold {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.01em;
}

.text-label-caps {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}