/* ============================================
   GPU Studio — Design Tokens
   Swiss Minimalist / Industrial Dark
   ============================================ */

:root {
    /* Background — warm dark slate */
    --bg-primary: #111318;
    --bg-surface: #171b22;
    --bg-elevated: #1e2330;

    /* Text — slightly warm white */
    --text-primary: #eef0f4;
    --text-secondary: rgba(238, 240, 244, 0.72);
    --text-tertiary: rgba(238, 240, 244, 0.45);

    /* Accent — Steel Blue at 20% opacity, for selection/active only */
    --accent: rgba(100, 160, 255, 0.18);
    --accent-text: #6ea8fe;

    /* Signal — color is forbidden except for warnings */
    --warning: #f5a623;
    --danger: #f44;
    --ok: rgba(238, 240, 244, 0.5);

    /* Metric Identity Colors (RGB channels for flexible opacity) */
    --metric-util: 130, 177, 255;
    --metric-temp: 255, 183, 77;
    --metric-mem: 100, 210, 255;
    --metric-power: 134, 239, 172;
    --metric-fan: 186, 147, 216;
    --metric-clocks: 255, 213, 130;
    --metric-efficiency: 168, 216, 185;
    --metric-pcie: 176, 190, 210;

    /* Sparkline */
    --spark-stroke: rgba(238, 240, 244, 0.6);
    --spark-stroke-secondary: rgba(238, 240, 244, 0.35);

    /* Bullet bar */
    --bar-track: rgba(255, 255, 255, 0.07);
    --bar-fill: rgba(255, 255, 255, 0.22);
    --bar-fill-warning: var(--warning);
    --bar-fill-danger: var(--danger);

    /* Grid */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --space-2xl: 64px;

    /* Sidebar */
    --sidebar-width: 56px;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;

    /* Borders — kept minimal, only for structure */
    --border-subtle: rgba(255, 255, 255, 0.07);

    /* Transitions */
    --transition-fast: 0.1s ease;
    --transition-normal: 0.2s ease;

    /* Accent glow (connected status) */
    --accent-glow: rgba(130, 200, 130, 0.6);
}

/* ============================================
   Reset
   ============================================ */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================
   Base Typography & Body
   ============================================ */

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-primary);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ============================================
   Scrollbar — Minimal
   ============================================ */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ============================================
   Selection
   ============================================ */

::selection {
    background: var(--accent);
    color: var(--text-primary);
}