/* ============================================================
   BASE — Reset, Variables, Typography
   Parivar Box v2 · ClickHouse Data-Dense Pro
   ============================================================ */

/* ── Font Faces ─────────────────────────────────────────── */
/* Self-hosted: upload Inter-Variable.woff2 + JetBrainsMono-Variable.woff2
   to /assets/fonts/ and uncomment below. CDN fallback is loaded in base.php.
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Variable.woff2') format('woff2-variations');
    font-weight: 100 800;
    font-display: swap;
}
*/

/* ── Design Tokens: Dark (default) ──────────────────────── */
:root {
    /* Backgrounds */
    --bg:         #181818;
    --bg-alt:     #202020;
    --surface:    #2a2a2a;

    /* Text */
    --text:       #f5f5f5;
    --text-muted: #a0a0a0;
    --text-dim:   #6a6a6a;

    /* Borders */
    --border:     #333333;

    /* Brand */
    --accent:       #faff69;   /* signature yellow */
    --accent-alt:   #ff6ec7;   /* magenta */
    --accent-text:  #000;      /* text color on accent bg (dark mode: black on yellow) */
    --accent-hover: #f0f050;   /* hovered accent bg */

    /* Semantic */
    --success:    #b5e48c;
    --warning:    #ffa07a;
    --danger:     #ff6b6b;
    --info:       #7bdff2;

    /* Data series (charts / category badges) */
    --s1: #faff69;
    --s2: #ff6ec7;
    --s3: #7bdff2;
    --s4: #ffa07a;
    --s5: #b5e48c;
    --s6: #c7a9ff;
    --s7: #ff9b54;
    --s8: #90e0ef;

    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Cascadia Code', 'SF Mono', monospace;

    /* Type scale */
    --text-2xs: 10px;
    --text-xs:  11px;
    --text-sm:  12px;
    --text-md:  13px;
    --text-lg:  14px;
    --text-xl:  16px;
    --text-2xl: 20px;
    --text-3xl: 24px;
    --text-4xl: 32px;

    /* Spacing (4px grid) */
    --sp-1:   4px;
    --sp-2:   8px;
    --sp-3:   12px;
    --sp-4:   16px;
    --sp-5:   20px;
    --sp-6:   24px;
    --sp-8:   32px;
    --sp-10:  40px;
    --sp-12:  48px;

    /* Radius */
    --r-sm:   3px;
    --r-md:   4px;
    --r-lg:   6px;
    --r-xl:   8px;
    --r-pill: 999px;

    /* Motion */
    --t-fast:   100ms ease;
    --t-normal: 150ms ease;
    --t-slow:   200ms ease;

    /* Layout */
    --sidebar-w:      220px;
    --sidebar-w-mini: 48px;
    --header-h:       48px;
}

/* ── Design Tokens: Light mode ───────────────────────────── */
/* Base hue: hsl(42, 42%, 86%) — warm amber parchment       */
[data-theme="light"] {
    /* Backgrounds */
    --bg:         hsl(42, 42%, 86%);    /* warm parchment (user base) */
    --bg-alt:     hsl(40, 28%, 74%);    /* clearly darker for panels/sidebar */
    --surface:    hsl(40, 55%, 99%);    /* near-white cream — cards pop */

    /* Text — neutral dark for clean contrast */
    --text:       hsl(220, 18%, 12%);
    --text-muted: hsl(220,  8%, 40%);
    --text-dim:   hsl(220,  6%, 60%);

    /* Borders */
    --border:     hsl(42, 22%, 70%);

    /* Accent — deep teal-blue; readable on parchment, white text on it */
    --accent:       hsl(205, 76%, 34%);
    --accent-alt:   hsl(320, 62%, 40%);
    --accent-text:  #fff;                    /* white text on dark teal */
    --accent-hover: hsl(205, 76%, 28%);      /* darker teal on hover */

    /* Semantic */
    --success:    #1a6b30;
    --warning:    #854400;
    --danger:     #a02020;
    --info:       #125d72;

    /* Series palette */
    --s1: hsl(205, 76%, 34%);
    --s2: hsl(320, 62%, 40%);
    --s3: hsl(152, 52%, 28%);
    --s4: hsl( 22, 80%, 38%);
    --s5: hsl(110, 48%, 28%);
    --s6: hsl(270, 52%, 40%);
    --s7: hsl( 38, 82%, 36%);
    --s8: hsl(198, 62%, 34%);
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 13px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: 1.5;
    color: var(--text);
    background-color: var(--bg);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Base Elements ───────────────────────────────────────── */
a {
    color: var(--accent);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

p {
    margin-bottom: var(--sp-2);
}
p:last-child {
    margin-bottom: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text);
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); font-weight: 600; }

code, pre, kbd, samp {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

pre {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4);
    overflow-x: auto;
}

code {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 1px 5px;
}

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--sp-4) 0;
}

img, svg {
    display: block;
    max-width: 100%;
}

ul, ol {
    padding-left: var(--sp-4);
}

li {
    margin-bottom: var(--sp-1);
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg-alt);
}
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
}

/* ── Selection ───────────────────────────────────────────── */
::selection {
    background: var(--accent);
    color: #000;
}

/* ── Focus Ring ──────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}
:focus:not(:focus-visible) {
    outline: none;
}

/* ── Utility Classes ─────────────────────────────────────── */
.mono        { font-family: var(--font-mono); }
.text-muted  { color: var(--text-muted); }
.text-dim    { color: var(--text-dim); }
.text-accent { color: var(--accent); }
.text-danger { color: var(--danger); }
.text-success{ color: var(--success); }
.text-warning{ color: var(--warning); }
.text-xs     { font-size: var(--text-xs); }
.text-sm     { font-size: var(--text-sm); }
.text-md     { font-size: var(--text-md); }
.text-lg     { font-size: var(--text-lg); }
.text-xl     { font-size: var(--text-xl); }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uppercase   { text-transform: uppercase; letter-spacing: 0.05em; }
.sr-only     { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.hidden      { display: none !important; }
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.items-center{ align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.w-full { width: 100%; }
.relative { position: relative; }
.pointer   { cursor: pointer; }