/*
 * tokens.css — OKLCh design tokens, LATTICE typography scale, spacing, and reset.
 * Lifted from index.html inline styles and kept as the single source of truth.
 * Fonts: Instrument Serif (display/title), Geist (body/label), Geist Mono (data/caption).
 * Local-first declarations avoid network/font 404s when optional subsets are absent.
 */

/* ── @font-face declarations (local-first; graceful system fallback) ── */
@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Instrument Serif');
}

@font-face {
    font-family: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: local('Instrument Serif Italic');
}

@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: local('Geist');
}

@font-face {
    font-family: 'Geist Mono';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: local('Geist Mono');
}

:root {
    /* ── Surfaces (OKLCh) ── */
    --surface-0:     oklch(7%  0 0);
    --surface-1:     oklch(10% 0 0);
    --surface-2:     oklch(14% 0 0);
    --surface-3:     oklch(19% 0 0);

    /* ── Legacy surface aliases ── */
    --bg:            var(--surface-0);
    --bg-elevated:   var(--surface-1);
    --bg-panel:      var(--surface-2);
    --bg-term:       oklch(5% 0 0);

    /* ── Text ── */
    --text-primary:  oklch(96% 0 0);
    --text-muted:    oklch(66% 0 0);
    --text-dim:      oklch(42% 0 0);
    --text:          var(--text-primary);
    --text-main:     var(--text-primary);

    /* ── Accent / status (OKLCh) ── */
    --accent:        oklch(87% 0.19 152);
    --accent-glow:   oklch(87% 0.19 152 / 0.15);
    --ok:            oklch(82% 0.17 152);
    --warn:          oklch(83% 0.17 55);
    --bad:           oklch(62% 0.22 29);
    --secondary:     oklch(83% 0.14 220);
    --violet:        oklch(68% 0.22 295);
    --warning:       var(--bad);
    --amber:         var(--warn);
    --accent-good:   var(--ok);
    --accent-warn:   var(--warn);
    --accent-bad:    var(--bad);

    /* ── Borders ── */
    --border:        oklch(22% 0 0);
    --border-light:  oklch(100% 0 0 / 0.08);

    /* ── Font families (Instrument Serif, Geist, Geist Mono; system fallbacks) ── */
    --font-serif: 'Instrument Serif', ui-serif, Georgia, serif;
    --font-sans:  'Geist', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono:  'Geist Mono', ui-monospace, "SF Mono", "Fira Code", "Consolas", monospace;

    /* ── Typography — legacy 3-size scale (kept for backwards compat) ── */
    --text-sm:         12px;
    --text-base:       14px;
    --text-lg:         18px;
    --text:            14px;
    --caption:         11px;
    --weight-regular:  400;
    --weight-semibold: 600;

    /* ── LATTICE 5-role typography scale ── */
    /* display: serif, large — page / section headings           */
    --display:  32px/36px var(--font-serif);
    /* title: serif, medium — panel / card headings               */
    --title:    20px/24px var(--font-serif);
    /* body: sans, base — default prose, list items               */
    --body:     14px/20px var(--font-sans);
    /* label: sans, small — form labels, nav items, chips         */
    --label:    12px/16px var(--font-sans);
    /* data: mono, base — metrics, IDs, token counts              */
    --data:     14px/20px var(--font-mono);
    /* caption: mono, small — hints, timestamps, secondary meta   */
    --caption-role: 11px/14px var(--font-mono);

    /* ── Spacing (8px grid) ── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;

    /* ── Radius ── */
    --radius-sm: 4px;
    --radius:    6px;
    --radius-lg: 10px;
    --shadow-glow: 0 0 0 1px oklch(87% 0.19 152 / 0.14), 0 18px 60px oklch(0% 0 0 / 0.48);
    --shadow-float: 0 18px 44px oklch(0% 0 0 / 0.34);

    /* ── Motion ── */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* ── Layout ── */
    --header-h:  54px;
    --sidebar-w: 240px;
    --drawer-w:  380px;
    --ticker-h:  34px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: 1.5;
    overflow: hidden;
}
button { cursor: pointer; font: inherit; color: inherit; background: none; border: none; min-height: 32px; }
input, textarea, select { font: inherit; color: inherit; background: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid oklch(87% 0.19 152 / 0.7); outline-offset: 2px; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
