/* ============================================================
   base.css — CSS Custom Properties & Base Typography
   TSTP World | Phase 1c Layout
   ============================================================ */

@import url('reset.css');

/* ── Custom Properties ─────────────────────────────────────── */
:root {
    /* ── Backgrounds */
    --tw-bg:             #0f1117;
    --tw-surface:        #1a1d27;
    --tw-card:           #252836;
    --tw-border:         #2d3148;

    /* ── Text */
    --tw-text:           #e8eaed;
    --tw-text-muted:     #8b8fa8;

    /* ── Accent / Brand */
    --tw-accent:         #4a9eff;
    --tw-accent-hover:   #3a8eef;

    /* ── Semantic colours */
    --tw-positive:       #2ecc71;
    --tw-negative:       #e74c3c;
    --tw-warning:        #f39c12;
    --tw-gold:           #ffd700;
    --tw-purple:         #9b59b6;

    /* ── Layout tokens */
    --tw-header-height:  60px;
    --tw-sidebar-width:  220px;
    --tw-border-radius:  6px;
    --tw-transition:     150ms ease;
}

/* ── Body ──────────────────────────────────────────────────── */
body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--tw-bg);
    color: var(--tw-text);
    line-height: 1.5;
}

/* ── Links ─────────────────────────────────────────────────── */
a {
    color: var(--tw-accent);
}

a:hover {
    text-decoration: underline;
}

/* ── Headings ──────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    color: var(--tw-text);
    margin-bottom: .5rem;
    line-height: 1.2;
}

/* ── Code & Pre ────────────────────────────────────────────── */
code, pre {
    font-family: 'Cascadia Code', 'Fira Code', Consolas, 'Courier New', monospace;
    background-color: var(--tw-card);
    border-radius: var(--tw-border-radius);
}

code {
    padding: .15em .4em;
    font-size: .875em;
}

pre {
    padding: 1rem;
    overflow-x: auto;
    font-size: .875rem;
    border: 1px solid var(--tw-border);
}

pre code {
    background: none;
    padding: 0;
    font-size: inherit;
}

/* ── Scrollbar (Webkit) ────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--tw-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--tw-border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--tw-text-muted);
}