@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root {

    --bg: #050505;

    --card: #0f0f0f;

    --border: #1d1d1d;

    --primary: #8b5cf6;

    --secondary: #3b82f6;

    --text: #ffffff;

    --muted: #9ca3af;

}

html.theme-light {

    --bg: #f4f4f5;

    --card: #ffffff;

    --border: #d4d4d8;

    --primary: #6366f1;

    --secondary: #3b82f6;

    --text: #111827;

    --muted: #6b7280;

}

html.theme-neon {

    --bg: #050816;

    --card: #0b1120;

    --border: #112240;

    --primary: #00fff7;

    --secondary: #ff00ff;

    --text: #ffffff;

    --muted: #7dd3fc;

}

html.theme-red {

    --bg: #0f0607;

    --card: #16090a;

    --border: #3f1518;

    --primary: #ef4444;

    --secondary: #f87171;

    --text: #ffffff;

    --muted: #fca5a5;

}

html.theme-green {

    --bg: #04110a;

    --card: #08180f;

    --border: #123524;

    --primary: #22c55e;

    --secondary: #4ade80;

    --text: #ffffff;

    --muted: #86efac;

}

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

body {

    background: var(--bg);

    color: var(--text);

    font-family: 'Inter', sans-serif;

    transition:
        background 0.25s ease,
        color 0.25s ease;

}