/* DESIGN TOKENS */

:root {
    --font-stack: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

    --bg: #0f172a;
    --bg-elev: #111827;
    --bg-input: #1a1a2e;
    --fg: #e2e8f0;
    --fg-muted: #9ca3af;
    --fg-dim: #6b7280;
    --fg-faint: #4b5563;
    --border: #1f2937;
    --border-strong: #374151;
    --border-stronger: #4b5563;

    --accent: #6366f1;
    --accent-hover: #818cf8;
    --link: #60a5fa;
    --link-hover: #93c5fd;

    --ok: #22c55e;
    --ok-strong: #16a34a;
    --ok-hover: #15803d;
    --ok-soft: #4ade80;
    --danger: #ef4444;
    --danger-soft: #ff6b6b;
    --danger-fg: #fca5a5;
    --warn: #fbbf24;
    --warn-strong: #f59e0b;
    --info: #67d4f1;
    --info-soft: #93c5fd;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.25rem;

    --radius-sm: 0.3rem;
    --radius-md: 0.4rem;
    --radius-lg: 0.5rem;
}

/* LAYOUT PRIMITIVES */

.panel {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.panel-title {
    color: var(--fg);
    font-family: var(--font-stack);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

/* FORM CONTROLS */

.text-input {
    background: var(--bg-input);
    color: var(--fg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-family: var(--font-stack);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s;
}

.text-input:focus {
    border-color: var(--link);
}

.text-input::placeholder {
    color: var(--fg-faint);
}

/* STATUS / FEEDBACK TEXT */

.empty-state {
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--border-stronger);
    font-family: var(--font-stack);
    font-size: 0.85rem;
}

/* SCROLLBAR THEME */

.themed-scrollbar::-webkit-scrollbar {
    width: 10px;
}

.themed-scrollbar::-webkit-scrollbar-track {
    background: var(--bg-input);
}

.themed-scrollbar::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 5px;
    border: 2px solid var(--bg-input);
}

.themed-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--border-stronger);
}

/* RESPONSIVE OVERRIDES */

@media (max-width: 768px) {
    input,
    select,
    textarea,
    .text-input {
        font-size: 1rem;
    }
}