/* ===== CSS VARIABLES ===== */
:root {
    /* Colors */
    --primary-purple: #c4b5fd;
    --light-purple: #e9e4f7;
    --dark-text: #1a1a1a;
    --gray-text: #666666;
    --light-gray: #f5f5f7;
    --white: #ffffff;
    --gradient-start: #f8f7ff;
    --gradient-end: #fdfcff;

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    --spacing-2xl: 80px;
    --spacing-3xl: 120px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    /* Typography */
    --font-family: 'SF Pro Display', 'SF Pro Text', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* ===== RESET ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== BASE STYLES ===== */
html {
    background: var(--gradient-start);
}

body {
    font-family: var(--font-family);
    background: linear-gradient(180deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    color: var(--dark-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

h1 {
    font-size: 68px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -2px;
    margin-bottom: var(--spacing-md);
    color: var(--dark-text);
}

h2 {
    font-size: 52px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: var(--dark-text);
}

h3 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--dark-text);
}

p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--gray-text);
    letter-spacing: -0.2px;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}