:root {
    /* Kinetic Logic Design System */
    --primary: #d2ff9a;
    --primary-container: #9ffb06;
    --on-primary: #3d6500;
    --secondary: #00eefc;
    --secondary-container: #006970;
    --on-secondary: #005359;
    --tertiary: #ac89ff;
    --tertiary-container: #7000ff;
    --background: #0d1000;
    --surface: #0d1000;
    --surface-bright: #2a2f00;
    --surface-container-low: #121500;
    --surface-container: #181c00;
    --surface-container-high: #1e2200;
    --surface-container-highest: #232800;
    --on-surface: #f2f9b7;
    --on-surface-variant: #a9b074;
    --outline: #737a44;
    --outline-variant: #454b1a;
    --error: #ff7351;
    
    --font-display: 'Space Grotesk', sans-serif;
    --font-headline: 'Space Grotesk', sans-serif;
    --font-body: 'Manrope', sans-serif;
    
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-full: 9999px;
}

body {
    background-color: var(--background);
    color: var(--on-surface);
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headline);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.display-lg {
    font-family: var(--font-display);
    font-size: 3.5rem;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    color: var(--on-primary);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-primary:hover {
    opacity: 0.9;
}

.card {
    background-color: var(--surface-container-highest);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.glass {
    background: rgba(35, 40, 0, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}