/* =============================================
   PRIVY — Design Tokens & Reset
   ============================================= */

:root {
    --bg: #04040b;
    --surface: rgba(12, 8, 24, 0.62);
    --surface-elevated: rgba(18, 12, 36, 0.72);
    --surface-light: rgba(255, 255, 255, 0.025);
    --border: rgba(255, 255, 255, 0.05);
    --border-glow: rgba(168, 85, 247, 0.16);

    --purple: #a855f7;
    --pink: #ec4899;
    --gold: #fbbf24;
    --green: #22c55e;
    --red: #ef4444;

    --text: #fff;
    --text-muted: rgba(255, 255, 255, 0.6);
    --text-dim: rgba(255, 255, 255, 0.38);

    --grad: linear-gradient(135deg, var(--purple), var(--pink));
    --grad-gold: linear-gradient(135deg, #fbbf24, #f59e0b);

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --nav-h: 56px;
    --radius: 12px;
    --radius-lg: 16px;
    --section-gap: 52px;
    --glass-blur: 40px;
    --glass-sat: 170%;

    /* 8px spacing scale */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
}

/* Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    font-size: 15px;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

ul {
    list-style: none;
}

button {
    font-family: inherit;
    border: none;
    cursor: pointer;
}

/* Typography */
h1,
h2,
h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 700;
    line-height: 1.15;
}

h1 {
    font-size: clamp(26px, 6vw, 42px);
    margin-bottom: var(--sp-3);
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(18px, 4.2vw, 28px);
    margin-bottom: var(--sp-2);
    letter-spacing: -0.01em;
}

h3 {
    font-size: clamp(14px, 3.2vw, 19px);
    margin-bottom: var(--sp-1);
}

.subtitle {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    line-height: 1.65;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0.015em;
}

.subtitle strong {
    color: var(--gold);
}

.subtitle em {
    color: var(--pink);
    font-style: normal;
}

.glow-text {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-center {
    text-align: center;
}

/* Spacing Utilities — 8px grid */
.mb-4 {
    margin-bottom: 4px;
}

.mb-8 {
    margin-bottom: 8px;
}

.mb-12 {
    margin-bottom: 12px;
}

.mb-16 {
    margin-bottom: 16px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-24 {
    margin-bottom: 24px;
}

.mb-32 {
    margin-bottom: 32px;
}

.mb-40 {
    margin-bottom: 40px;
}

/* Film Grain Overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.028;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 180px;
    mix-blend-mode: overlay;
}

/* Mobile Token Overrides */
@media (max-width: 767px) {
    :root {
        --section-gap: 32px;
    }
}