/* ============================================================
   InterHeat v2 — Design Tokens
   Single source of truth for color, type, spacing, elevation.
   Do NOT hard-code colors/gradients in pages; use these vars.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
    /* ── Brand ─────────────────────────────────────────── */
    --brand-blue: #0b5ed7;
    --brand-blue-dark: #084298;
    --brand-teal: #0f766e;
    --brand-teal-dark: #0d5f59;
    --brand-gradient: linear-gradient(120deg, #0b5ed7 0%, #0f766e 100%);

    /* ── Semantic status ───────────────────────────────── */
    --color-primary: var(--brand-blue);
    --color-primary-dark: var(--brand-blue-dark);
    --color-secondary: var(--brand-teal);
    --color-success: #15803d;
    --color-warning: #d97706;
    --color-danger: #dc2626;
    --color-info: #0284c7;

    /* status backgrounds (badges/pills) */
    --status-online-bg: #dcfce7;   --status-online-fg: #166534;
    --status-stale-bg: #fef3c7;    --status-stale-fg: #92400e;
    --status-offline-bg: #fee2e2;  --status-offline-fg: #991b1b;

    /* ── Surfaces ──────────────────────────────────────── */
    --bg-app: #f3f7fb;
    --bg-surface: #ffffff;
    --bg-subtle: #fbfdff;
    --bg-inset: #eef3f8;
    --bg-dark: #0f172a;

    /* ── Text ──────────────────────────────────────────── */
    --text-strong: #10243e;
    --text: #37506b;
    --text-muted: #6e859e;
    --text-on-dark: #dbe8f7;

    /* ── Borders ───────────────────────────────────────── */
    --border: #d6e2ef;
    --border-strong: #bfd1e2;
    --focus-ring: 0 0 0 3px rgba(11, 94, 215, 0.18);

    /* ── Elevation ─────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);
    --shadow-lg: 0 14px 38px rgba(15, 23, 42, 0.16);

    /* ── Radius ────────────────────────────────────────── */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    /* ── Spacing scale (4px base) ──────────────────────── */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;

    /* ── Type ──────────────────────────────────────────── */
    --font-sans: 'Source Sans 3', 'Segoe UI', Tahoma, sans-serif;
    --font-display: 'Sora', 'Segoe UI', Tahoma, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;

    /* ── Layout ────────────────────────────────────────── */
    --shell-max: 1600px;
    --nav-height: 60px;
    --z-nav: 100;
    --z-modal: 1000;
}