@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&display=swap');
@import "tailwindcss";

@theme {
    --color-blue: #1A56DB;
    --color-blue-hover: #1648C0;
    --color-blue-soft: #3B82F6;
    --font-sans: 'General Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

/* Theme variables — light is default */
:root {
    --bg: #F6F8FB;
    --surface: #FFFFFF;
    --raised: #F0F3F8;
    --line: #E3E8EF;
    --line-soft: #EDF1F6;
    --txt: #0F1B2D;
    --txt-2: #5A6B82;
    --txt-3: #93A1B5;
    --accent: #1A56DB;
    --accent-hover: #1648C0;
    --accent-soft: rgba(26, 86, 219, 0.08);
    --ok: #18A957;
    --bad: #E5484D;
    --shadow: rgba(15, 27, 45, 0.06);
}

.dark {
    --bg: #0B0F14;
    --surface: #121821;
    --raised: #1A222D;
    --line: #232D3A;
    --line-soft: #1C2530;
    --txt: #ECF1F7;
    --txt-2: #94A3B5;
    --txt-3: #5C6B7E;
    --accent: #3B82F6;
    --accent-hover: #5093F7;
    --accent-soft: rgba(59, 130, 246, 0.12);
    --ok: #2BC96F;
    --bad: #F0565B;
    --shadow: rgba(0, 0, 0, 0.3);
}

body {
    background: var(--bg);
    color: var(--txt);
    font-family: 'General Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    transition: background 0.3s ease, color 0.3s ease;
}

/* Utility classes mapped to theme vars */
.bg-bg { background: var(--bg); }
.bg-surface { background: var(--surface); }
.bg-raised { background: var(--raised); }
.bg-accent { background: var(--accent); }
.bg-accent-soft { background: var(--accent-soft); }
.text-txt { color: var(--txt); }
.text-txt-2 { color: var(--txt-2); }
.text-txt-3 { color: var(--txt-3); }
.text-accent { color: var(--accent); }
.text-ok { color: var(--ok); }
.text-bad { color: var(--bad); }
.border-line { border-color: var(--line); }
.border-line-soft { border-color: var(--line-soft); }
.border-accent { border-color: var(--accent); }

.card-shadow { box-shadow: 0 1px 3px var(--shadow), 0 1px 2px var(--shadow); }
.card-shadow-lg { box-shadow: 0 8px 30px var(--shadow); }

.glow-focus:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

@keyframes shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.shimmer {
    background: linear-gradient(90deg, var(--raised) 25%, var(--line-soft) 50%, var(--raised) 75%);
    background-size: 800px 100%;
    animation: shimmer 1.4s infinite linear;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }