:root {
    /* Colors extracted from PFP */
    --color-bg: #050505;
    --color-text: #e0e0e0;
    --color-primary: #adbb1d;
    --color-primary-rgb: 173, 187, 29;
    --color-accent: #c8d422;
    --color-secondary: #1a1a1a;
    --color-highlight: #ffcc00; /* Amber from lighting */
    
    /* Fonts */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'Space Mono', monospace;
    
    /* Spacing */
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;
    --spacing-xl: 64px;
}

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

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    overflow-x: hidden;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--color-secondary);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* Typography */
h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
}

code, .mono {
    font-family: var(--font-mono);
}

/* Film Grain Overlay */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    opacity: 0.07;
}

/* Loading State Helper */
body.loading {
    overflow: hidden;
}

/* Sections */
section {
    min-height: 100vh;
    padding: var(--spacing-xl) var(--spacing-lg);
    position: relative;
    display: flex;
    flex-direction: column;
}