/*
 * Design tokens. Every colour, space, size and layer in the portal is named
 * here and used through a variable, so a change happens once.
 *
 * The palette is carried over from the old index.css deliberately: this is a
 * restructure, not a rebrand, and the people using it have been looking at this
 * red-on-near-black for months. What is new is everything the old sheet did not
 * have - a spacing scale, a type scale, named layers - which is what every
 * `style="margin-bottom: 20px"` in the old HTML was standing in for.
 */

:root {
    color-scheme: dark;

    /* ── Surfaces ─────────────────────────────────────────────────────── */
    --bg: #050508;
    --bg-raised: #0b0b11;
    --panel: rgba(18, 14, 14, 0.75);
    --panel-solid: #121014;
    --panel-hover: rgba(255, 255, 255, 0.04);
    --overlay: rgba(3, 3, 6, 0.78);

    /* ── Lines ────────────────────────────────────────────────────────── */
    --line: rgba(211, 47, 47, 0.15);
    --line-strong: rgba(211, 47, 47, 0.4);
    --line-quiet: rgba(255, 255, 255, 0.08);

    /* ── Accents ──────────────────────────────────────────────────────── */
    --primary: #d32f2f;
    --primary-dim: #5c1313;
    --accent: #ff3366;
    --accent-glow: rgba(255, 51, 102, 0.25);
    --ok: #00e676;
    --warn: #ffb74d;
    --danger: #e53935;
    --info: #4fc3f7;

    /* ── Text ─────────────────────────────────────────────────────────── */
    --text: #eceff1;
    --text-dim: #b0bec5;
    --text-muted: #78909c;

    /* ── Type ─────────────────────────────────────────────────────────── */
    --font-head: 'Outfit', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

    --t-xs: 0.75rem;
    --t-sm: 0.85rem;
    --t-md: 0.95rem;
    --t-lg: 1.1rem;
    --t-xl: 1.4rem;
    --t-2xl: 1.9rem;

    /* ── Space ────────────────────────────────────────────────────────── */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;
    --s7: 48px;

    /* ── Shape ────────────────────────────────────────────────────────── */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 14px;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.6);

    /* ── Layout ───────────────────────────────────────────────────────── */
    --rail-w: 216px;
    --dock-w: 340px;
    --header-h: 56px;

    /* ── Layers ───────────────────────────────────────────────────────── */
    --z-dock: 10;
    --z-header: 20;
    --z-modal: 100;
    --z-toast: 200;
}