/* CSS Variables and Reset */
:root {
    --radius: .625rem;
    --accent-100: #ef6f2e;
    --accent-200: #ee6018;
    --accent-300: #d15010;
    --dark-base-primary: #020202;
    --dark-base-secondary: #101010;
    --light-base-primary: #eee;
    --light-base-secondary: #fafafa;
    --neutral-100: #d6d3d2;
    --neutral-200: #ccc9c7;
    --neutral-300: #b8b3b0;
    --neutral-400: #a49d9a;
    --neutral-500: #8a8380;
    --neutral-600: #5c5855;
    --neutral-700: #4d4947;
    --neutral-800: #3d3a39;
    --neutral-900: #2e2c2b;
    --neutral-1000: #1f1d1c;
    --spacing: .25rem;
    color-scheme: light dark;

    /* Light theme */
    --color-background: var(--light-base-primary);
    --color-foreground: var(--dark-base-primary);
    --color-dark-base-primary: var(--light-base-primary);
    --color-dark-base-secondary: var(--light-base-secondary);
    --color-light-base-primary: var(--dark-base-primary);
    --color-light-base-secondary: var(--dark-base-secondary);
    --color-base-100: var(--neutral-1000);
    --color-base-200: var(--neutral-900);
    --color-base-300: var(--neutral-800);
    --color-base-400: var(--neutral-700);
    --color-base-500: var(--neutral-600);
    --color-base-600: var(--neutral-500);
    --color-base-700: var(--neutral-400);
    --color-base-800: var(--neutral-300);
    --color-base-900: var(--neutral-200);
    --color-base-1000: var(--neutral-100);
    --color-accent-100: var(--accent-100);

    --font-geist-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
    --font-geist-mono: "SF Mono", "IBM Plex Mono", ui-monospace, Menlo, Monaco, "Cascadia Code", "Source Code Pro", Consolas, monospace;
}

*,
::backdrop,
:after,
:before {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
}

* {
    border-color: var(--color-base-800);
    outline-color: var(--color-base-800);
}

*::selection {
    background-color: var(--color-accent-100);
    color: var(--color-dark-base-primary);
}

html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--font-geist-sans);
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-background);
    font-family: var(--font-geist-sans);
    color: var(--color-foreground);
    text-wrap: pretty;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}