: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: #8e9fb6;

    --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;

    --card-radius: 16px;

    --card-background: rgba(23, 30, 39, 0.7);
    --card-border-color: rgba(76, 82, 91, 0.7);
    --card-title: #f1f5f9;
    --card-meta: #94a3b8;
    --card-muted: #64748b;
}

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 !important;
}

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

.shimmer {
    position: relative !important;
    overflow: hidden !important;
}

.shimmer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: shimmerEngine 1.6s infinite ease-in-out;
    pointer-events: none;
}

@keyframes shimmerEngine {
    0% {
        transform: translateX(-150%);
    }
    100% {
        transform: translateX(550%);
    }
}