/* GrooveIQ design tokens — palette, type, spacing, radius.
 * Lifted from design_handoff_grooveiq_dashboard/styles.css.
 * Dark mode is the default and primary target. Light is supported but secondary.
 */

:root {
    /* Light mode — lavender + wine on warm off-white */
    --bg: #f3f0f5;
    --paper: #ffffff;
    --paper-2: #f7f5f9;
    /* Subtle inset surface for nested cells inside a panel — shared by every
       page so cells/run-chips/scan-cells/metric-cells all read the same. */
    --paper-sub: #f3f0f5;
    --ink: #171821;
    --ink-2: #4d3e50;
    --ink-3: #7b6e7f;
    --ink-4: #c4bcc8;
    --line: #292631;
    --line-soft: rgba(41, 38, 49, 0.18);
    --line-faint: rgba(41, 38, 49, 0.08);
    --grid: rgba(41, 38, 49, 0.045);
    --accent: #a887ce;
    --accent-soft: #ece2f5;
    --wine: #9c526d;
    --wine-soft: #f1dde4;
    --good: #a887ce;
    --good-soft: #ece2f5;
    --warn: #9c526d;
    --warn-soft: #f1dde4;
    --bad: #9c526d;
    --bad-soft: #f1dde4;

    --display: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
    --body: 'Inter', system-ui, -apple-system, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Spacing */
    --page-pad-y: 22px;
    --page-pad-x: 28px;
    --panel-pad: 16px;
    --tile-pad-y: 14px;
    --tile-pad-x: 16px;
    --grid-gap: 14px;
    --stat-row-gap: 12px;

    /* Radius */
    --r-panel: 10px;
    --r-button: 8px;
    --r-tile: 7px;
    --r-pill: 999px;
    --r-mono-badge: 3px;

    /* Sidebar geometry */
    --side-w-expanded: 220px;
    --side-w-collapsed: 60px;
    --topbar-h: 46px;
}

[data-theme="dark"] {
    --bg: #171821;
    --paper: #292631;
    --paper-2: #4d3e50;
    --paper-sub: rgba(236, 232, 242, 0.04);
    --ink: #ece8f2;
    --ink-2: #b8b0c4;
    --ink-3: #7b6e7f;
    --ink-4: #4d3e50;
    --line: #ece8f2;
    --line-soft: rgba(236, 232, 242, 0.14);
    --line-faint: rgba(236, 232, 242, 0.06);
    --grid: rgba(236, 232, 242, 0.04);
    --accent: #a887ce;
    --accent-soft: rgba(168, 135, 206, 0.18);
    --wine: #9c526d;
    --wine-soft: rgba(156, 82, 109, 0.20);
    --good: #a887ce;
    --good-soft: rgba(168, 135, 206, 0.16);
    --warn: #9c526d;
    --warn-soft: rgba(156, 82, 109, 0.18);
    --bad: #9c526d;
    --bad-soft: rgba(156, 82, 109, 0.20);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html, body { height: 100%; }

body {
    font-family: var(--body);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 13px;
    line-height: 1.45;
}

/* Type primitives */
.eyebrow {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.mono {
    font-family: var(--mono);
    font-size: 12px;
}

.display {
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.muted { color: var(--ink-3); }

/* Pulse animation for live dots / indicators */
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}