/**
 * ═══════════════════════════════════════════════════════════════════════════
 * BluePartner Ops Console — 01 · TOKENS
 * ═══════════════════════════════════════════════════════════════════════════
 * Fonte única de verdade do design system. Dark é o tema base;
 * o modo claro redefine os mesmos tokens sob [data-theme="light"].
 */

:root {
    /* ── Tipografia ─────────────────────────────────────────────────────── */
    --font-ui: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    --font-data: 'IBM Plex Mono', 'Cascadia Code', Consolas, monospace;

    --text-xs: 10.5px;
    --text-sm: 12px;
    --text-base: 13.5px;
    --text-md: 15px;
    --text-lg: 18px;
    --text-xl: 24px;

    --track-label: 0.14em;   /* micro-labels uppercase */
    --track-wide: 0.08em;

    /* ── Superfícies (dark base) ────────────────────────────────────────── */
    --bg-page: #05070c;
    --bg-panel: #0a0f17;
    --bg-inset: #070b12;
    --bg-raise: #0e1520;
    --bg-hover: rgba(0, 217, 255, 0.05);
    --bg-topbar: rgba(6, 9, 14, 0.82);

    /* ── Linhas ─────────────────────────────────────────────────────────── */
    --line: rgba(126, 152, 192, 0.13);
    --line-strong: rgba(126, 152, 192, 0.24);

    /* ── Texto ──────────────────────────────────────────────────────────── */
    --ink: #e9eff8;
    --ink-2: #9aacc5;
    --ink-3: #5e7190;
    --ink-4: #43536b;

    /* ── Acento único + status ──────────────────────────────────────────── */
    --accent: #00d9ff;
    --accent-ink: #7fe7ff;
    --accent-dim: rgba(0, 217, 255, 0.10);
    --accent-border: rgba(0, 217, 255, 0.32);
    --accent-glow: 0 0 22px rgba(0, 217, 255, 0.22);

    --ok: #34d399;
    --warn: #fbbf24;
    --danger: #f87171;
    --info: #60a5fa;

    /* ── Geometria ──────────────────────────────────────────────────────── */
    --r-sm: 8px;
    --r-md: 12px;
    --r-pill: 999px;

    --sidebar-w: 248px;
    --topbar-h: 58px;
    --gutter: 26px;

    /* ── Elevação ───────────────────────────────────────────────────────── */
    --shadow-panel: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 10px 28px rgba(0, 0, 0, 0.38);
    --shadow-pop: 0 24px 72px rgba(0, 0, 0, 0.6);

    /* ── Movimento ──────────────────────────────────────────────────────── */
    --ease: cubic-bezier(0.22, 0.8, 0.36, 1);
    --t-fast: 130ms var(--ease);
    --t-base: 220ms var(--ease);
}

/* ═══ MODO CLARO — "laboratório" ═══════════════════════════════════════── */
[data-theme="light"] {
    --bg-page: #f2f5f9;
    --bg-panel: #ffffff;
    --bg-inset: #f7f9fc;
    --bg-raise: #eef2f8;
    --bg-hover: rgba(8, 145, 178, 0.06);
    --bg-topbar: rgba(255, 255, 255, 0.86);

    --line: #dce3ee;
    --line-strong: #c6d2e2;

    --ink: #16202e;
    --ink-2: #46586e;
    --ink-3: #71839b;
    --ink-4: #9aa9be;

    --accent: #0891b2;
    --accent-ink: #0e7490;
    --accent-dim: rgba(8, 145, 178, 0.08);
    --accent-border: rgba(8, 145, 178, 0.35);
    --accent-glow: 0 0 0 rgba(0, 0, 0, 0);

    --ok: #059669;
    --warn: #d97706;
    --danger: #dc2626;
    --info: #2563eb;

    --shadow-panel: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.06);
    --shadow-pop: 0 24px 64px rgba(16, 24, 40, 0.18);
}