:root {

    --color-primary-raw: 56, 189, 248;
    --color-primary: rgb(var(--color-primary-raw));

    --color-bg: #0b0f19;
    --color-on-bg: #f8fafc;
    --color-surface: #111827;
    --color-on-surface: #e2e8f0;
    --color-surface-container: #1f2937;
    --color-surface-container-high: #374151;

    --color-success: #10b981;
    --color-error: #ef4444;
    --color-text-secondary: #64748b;

    --theme-bg: var(--color-bg);
    --theme-text: var(--color-on-bg);
    --theme-text-muted: var(--color-text-secondary);

    --theme-navbar-bg: #030712;
    --theme-panel-bg: var(--color-surface);
    --theme-card-bg: var(--color-surface-container);
    --theme-input-bg: var(--color-surface-container-high);

    --theme-border: rgba(var(--color-primary-raw), 0.2);
    --theme-border-soft: rgba(255, 255, 255, 0.05);
    --theme-accent-glow: rgba(var(--color-primary-raw), 0.35);

    --font-primary: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: "Alata", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
}

html,
body {
    background-color: var(--theme-bg);
    color: var(--theme-text);
    font-family: var(--font-primary);
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}