/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    --orange-50: #FFF3EC;
    --orange-100: #FFE0CC;
    --orange-200: #FFB87A;
    --orange-300: #FF9A52;
    --orange-400: #FF7A33;
    --orange-500: #E86020;
    --orange-600: #C44D0F;

    --black: #0A0A0A;
    --gray-900: #1A1A1A;
    --gray-700: #374151;
    --gray-600: #4B5563;
    --gray-500: #6B7280;
    --gray-400: #9CA3AF;
    --gray-300: #D1D5DB;
    --gray-100: #F3F4F6;
    --gray-50: #F9FAFB;
    --white: #FFFFFF;

    --success: #16A34A;
    --error: #DC2626;
    --warning: #D97706;

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-6: 3rem;
    --space-8: 4rem;
    --space-12: 6rem;
    --space-16: 8rem;
    --space-20: 10rem;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    background: var(--white);
    color: var(--gray-700);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    max-width: 100%;
    overflow-x: hidden;
}

img,
video {
    max-width: 100%;
    display: block;
}

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

button {
    cursor: pointer;
    font-family: var(--font);
}