/* ═══════════════════════════════════════════════════════════════
   QEPilot Stack — theme layer

   Loaded AFTER styles.css and overrides only design tokens, type and
   a handful of surfaces. Kept separate on purpose: the upstream
   stylesheet stays untouched, so `git fetch upstream` merges cleanly.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    /* base — deep ink, cooler and flatter than the terminal green-black */
    --bg-primary:      #0A0F19;
    --bg-secondary:    #101826;
    --bg-tertiary:     #17202F;

    --border-primary:  #24304400;
    --border-primary:  #243044;
    --border-secondary:#1A2434;
    --border-color:    #243044;

    --text-primary:    #DDE4EF;
    --text-secondary:  #8093AB;

    /* one signal colour, used sparingly */
    --text-accent:     #3ED9B6;
    --accent-color:    #3ED9B6;
    --text-success:    #4FCF87;
    --text-warning:    #F0A64B;
    --text-error:      #FF6B5E;
    --text-info:       #7FB4E8;

    --shadow-primary:  rgba(0, 0, 0, 0.55);
    --shadow-secondary:rgba(2, 6, 14, 0.9);

    --qp-ui:   'Sora', system-ui, -apple-system, sans-serif;
    --qp-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}

/* ── typography ─────────────────────────────────────────────── */
body,
button, input, select, textarea {
    font-family: var(--qp-ui);
    -webkit-font-smoothing: antialiased;
}
body { letter-spacing: -0.005em; }

h1, h2, h3, h4 {
    font-family: var(--qp-ui);
    font-weight: 700;
    letter-spacing: -0.02em;
}

code, pre, kbd, samp,
[class*="terminal"], [class*="command"], [class*="install"] {
    font-family: var(--qp-mono);
}

/* ── surfaces ───────────────────────────────────────────────── */
body {
    background:
        radial-gradient(70% 45% at 50% -8%, rgba(62, 217, 182, 0.07), transparent 62%),
        var(--bg-primary);
    background-attachment: fixed;
}

[class*="card"],
[class*="component-item"] {
    border-radius: 10px;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
[class*="card"]:hover,
[class*="component-item"]:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .7);
}

/* accent-tinted focus rings rather than the default browser outline */
:where(input, select, textarea, button):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(62, 217, 182, .28);
    border-color: var(--accent-color);
}

/* ── wordmark ───────────────────────────────────────────────── */
.ascii-title,
[class*="logo"] h1,
[class*="hero"] h1 {
    font-family: var(--qp-mono);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--accent-color);
}

::selection { background: var(--accent-color); color: #06121A; }

/* scrollbars, to match the flatter surface */
* { scrollbar-color: var(--border-color) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
    background: var(--border-color); border-radius: 6px;
    border: 2px solid var(--bg-primary);
}
*::-webkit-scrollbar-thumb:hover { background: #33425C; }
*::-webkit-scrollbar-track { background: transparent; }