/* ── Palette & Design Tokens ──────────────────────────── */
:root {
    /* Colors */
    --bg: #0B1527;
    --bg-opaque: rgba(11, 21, 39, 0.45);
    --teal: #58b1c3;
    --green: #6fcf97;
    --red: #ff4d6d;
    --pink: #ff6ec7;
    --purple: #9b5de5;
    --blue: #007F9E;
    --neutral: #98A6AF;
    --text: #e8e8e8;
    --text-muted: #8899aa;
    --text-dim: #5a6a7a;
    --border: rgba(255, 255, 255, 0.15);
    --btn-hover-bg: rgba(255, 255, 255, 0.03);
    --btn-active-bg: rgba(88, 177, 195, 0.12);
    --btn-active-border: rgba(88, 177, 195, 0.3);
    --row-hover-bg: rgba(255, 255, 255, 0.02);
    --row-border: rgba(255, 255, 255, 0.03);
    --code-bg: rgba(88, 177, 195, 0.1);
    --tooltip-bg: #2c3e50;
    --tooltip-text: #f1f1f1;
    --tooltip-body: #d9d9d9;

    /* Typography scale */
    --text-sm: 0.75rem;   /* secondary text, small UI */
    --text-md: 1rem;      /* body text, subtitles, descriptions */
    --text-lg: 1.25rem;   /* section headings */

    /* Spacing scale */
    --space-xs: 0.25rem;  /* tiny gaps: legend rows, label margins */
    --space-sm: 0.5rem;   /* small: icon gaps, dot gaps, table cell vertical */
    --space-ms: 0.75rem;  /* medium-small: table cell horizontal, sidebar padding */
    --space-md: 1rem;     /* standard: flex gaps, element margins */
    --space-lg: 1.5rem;   /* section internal spacing */
    --space-xl: 2rem;     /* major section padding */
    --space-2xl: 3rem;    /* large section breaks */
}

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

html {
    font-size: 20px;
    background: radial-gradient(
            60rem 40rem at 50% -45px,
            rgba(0, 226, 213, 0.35),
            rgba(18, 208, 254, 0.25) 30%,
            transparent 70%
    ), var(--bg);
}

body {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text);
    font-size: var(--text-md);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

code {
    background: var(--code-bg);
    color: var(--teal);
    padding: 0.15em 0.45em;
    border-radius: 4px;
    font-size: 0.95em;
}