/** tokens, typography, layout, buttons **/
/* site-base.css
   Tokens + base typography + layout + utilities + buttons
   Keep this file shared across ALL pages.
*/

:root{
    --bg:#0b0f17;
    --panel:#111828;
    --panel2:#0f1626;
    --text:#e7eefc;
    --muted:#a8b3cc;
    --line:rgba(255,255,255,.10);
    --brand:#7aa7ff;
    --brand2:#7cffd6;

    --shadow: 0 10px 30px rgba(0,0,0,.35);
    --radius: 18px;
    --max: 1120px;
    --chip: rgba(255,255,255,.06);

    --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Prefer system light mode if user has it, but allow explicit html[data-theme] override */
@media (prefers-color-scheme: light){
    :root{
        --bg:#f6f8ff;
        --panel:#ffffff;
        --panel2:#f3f6ff;
        --text:#0a1222;
        --muted:#44536f;
        --line:rgba(10,18,34,.12);
        --shadow: 0 10px 30px rgba(10,18,34,.08);
        --chip: rgba(10,18,34,.06);
    }
}

/* Explicit theme overrides (used by site-header.js) */
html[data-theme="dark"]{ color-scheme: dark; }
html[data-theme="light"]{ color-scheme: light; }

html[data-theme="dark"]{
    --bg:#0b0f17;
    --panel:#111828;
    --panel2:#0f1626;
    --text:#e7eefc;
    --muted:#a8b3cc;
    --line:rgba(255,255,255,.10);
    --shadow: 0 10px 30px rgba(0,0,0,.35);
    --chip: rgba(255,255,255,.06);
}

html[data-theme="light"]{
    --bg:#f6f8ff;
    --panel:#ffffff;
    --panel2:#f3f6ff;
    --text:#0a1222;
    --muted:#44536f;
    --line:rgba(10,18,34,.12);
    --shadow: 0 10px 30px rgba(10,18,34,.08);
    --chip: rgba(10,18,34,.06);
}

*{ box-sizing:border-box; }

body{
    margin:0;
    font-family: var(--sans), sans-serif;
    color: var(--text);
    line-height: 1.45;
    background:
            radial-gradient(1000px 600px at 20% -20%, rgba(122,167,255,.25), transparent 55%),
            radial-gradient(900px 600px at 110% 10%, rgba(124,255,214,.18), transparent 55%),
            var(--bg);
}

a{ color: inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 20px;
}

.container{
    max-width: var(--max);
    margin: 0 auto;
    padding: 24px;
}

/* Basic type */
h1,h2,h3{ margin:0; letter-spacing:-.2px; }
p{ margin: 10px 0; }
.muted{ color: var(--muted); }
.small{ font-size: 13px; color: var(--muted); }
.hr{ height:1px; background: var(--line); margin: 18px 0; }

/* Buttons */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 11px 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--chip);
    color: var(--text);
    font-weight: 800;
    cursor:pointer;
}

.btn:hover{ text-decoration:none; box-shadow: var(--shadow); }

.btn-primary{
    border: 1px solid rgba(122,167,255,.45);
    background: linear-gradient(135deg, rgba(122,167,255,.35), rgba(124,255,214,.22));
}

.btn-ghost{
    background: transparent;
}

/* Card */
.card{
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
}
html[data-theme="light"] .card{
    background: linear-gradient(180deg, rgba(10,18,34,.03), rgba(10,18,34,.01));
}

html{
    overflow-y: scroll; /* always reserve scrollbar space */
}