/* Sim-Fusion design tokens — single source of truth for spacing,
   typography, color, radius, elevation, motion. Everything in rem so
   the UI scales cleanly at 100% and 125% Windows display scaling. */

:root {
    /* ── Type ─────────────────────────────────────────────────── */
    --sf-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sf-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --sf-fs-12: 0.75rem;     /* meta, captions */
    --sf-fs-13: 0.8125rem;   /* dense table cells */
    --sf-fs-14: 0.875rem;    /* default body */
    --sf-fs-16: 1rem;        /* prominent body */
    --sf-fs-18: 1.125rem;    /* card titles */
    --sf-fs-20: 1.25rem;     /* section h2 */
    --sf-fs-24: 1.5rem;      /* page h1 */
    --sf-fs-32: 2rem;        /* hero numerics */
    --sf-fs-48: 3rem;        /* pump display */

    --sf-lh-tight: 1.2;
    --sf-lh-snug: 1.35;
    --sf-lh-normal: 1.5;

    --sf-fw-regular: 400;
    --sf-fw-medium: 500;
    --sf-fw-semibold: 600;
    --sf-fw-bold: 700;

    /* ── Spacing (4pt scale) ──────────────────────────────────── */
    --sf-space-1: 0.25rem;   /* 4 */
    --sf-space-2: 0.5rem;    /* 8 */
    --sf-space-3: 0.75rem;   /* 12 */
    --sf-space-4: 1rem;      /* 16 */
    --sf-space-5: 1.25rem;   /* 20 */
    --sf-space-6: 1.5rem;    /* 24 */
    --sf-space-8: 2rem;      /* 32 */
    --sf-space-10: 2.5rem;   /* 40 */
    --sf-space-12: 3rem;     /* 48 */
    --sf-space-16: 4rem;     /* 64 */

    /* ── Radius ───────────────────────────────────────────────── */
    --sf-radius-sm: 0.25rem;
    --sf-radius-md: 0.5rem;
    --sf-radius-lg: 0.75rem;
    --sf-radius-xl: 1rem;
    --sf-radius-pill: 999px;

    /* ── Layout ───────────────────────────────────────────────── */
    --sf-sidebar-w: 16rem;
    --sf-sidebar-w-collapsed: 4rem;
    --sf-topbar-h: 3.5rem;
    --sf-content-max: 90rem;
    --sf-hit-target: 2.75rem;   /* 44px min touch */

    /* ── Motion ───────────────────────────────────────────────── */
    --sf-ease: cubic-bezier(.2,.7,.2,1);
    --sf-dur-fast: 120ms;
    --sf-dur: 200ms;
    --sf-dur-slow: 320ms;

    /* ── Elevation ────────────────────────────────────────────── */
    --sf-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --sf-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
    --sf-shadow-md: 0 4px 8px -2px rgba(15, 23, 42, .08), 0 2px 4px -1px rgba(15, 23, 42, .04);
    --sf-shadow-lg: 0 12px 24px -8px rgba(15, 23, 42, .14), 0 4px 8px -2px rgba(15, 23, 42, .06);
    --sf-shadow-focus: 0 0 0 3px rgba(13, 110, 253, .25);

    /* ── Color: light theme ──────────────────────────────────── */
    --sf-bg: #f6f8fb;
    --sf-surface: #ffffff;
    --sf-surface-2: #f1f4f9;
    --sf-surface-3: #e8edf4;
    --sf-border: #e2e8f0;
    --sf-border-strong: #cbd5e1;
    --sf-text: #0f172a;
    --sf-text-muted: #475569;
    --sf-text-subtle: #64748b;

    --sf-accent: #2563eb;
    --sf-accent-hover: #1d4ed8;
    --sf-accent-soft: #dbeafe;
    --sf-accent-fg: #ffffff;

    --sf-success: #16a34a;
    --sf-success-soft: #dcfce7;
    --sf-warn: #d97706;
    --sf-warn-soft: #fef3c7;
    --sf-danger: #dc2626;
    --sf-danger-soft: #fee2e2;
    --sf-info: #0891b2;
    --sf-info-soft: #cffafe;
}

/* Dark theme overrides — Bootstrap toggles via [data-bs-theme="dark"] */
[data-bs-theme="dark"] {
    --sf-bg: #0b1220;
    --sf-surface: #111a2e;
    --sf-surface-2: #162038;
    --sf-surface-3: #1d2944;
    --sf-border: #243352;
    --sf-border-strong: #2e4068;
    --sf-text: #e6ecf5;
    --sf-text-muted: #9bacc7;
    --sf-text-subtle: #7a8aa6;

    --sf-accent: #60a5fa;
    --sf-accent-hover: #93c5fd;
    --sf-accent-soft: #1e3a8a;
    --sf-accent-fg: #0b1220;

    --sf-success: #4ade80;
    --sf-success-soft: #064e3b;
    --sf-warn: #fbbf24;
    --sf-warn-soft: #78350f;
    --sf-danger: #f87171;
    --sf-danger-soft: #7f1d1d;
    --sf-info: #22d3ee;
    --sf-info-soft: #164e63;

    --sf-shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
    --sf-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .25);
    --sf-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, .45), 0 2px 4px -1px rgba(0, 0, 0, .25);
    --sf-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, .55), 0 4px 8px -2px rgba(0, 0, 0, .3);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --sf-dur-fast: 0ms;
        --sf-dur: 0ms;
        --sf-dur-slow: 0ms;
    }
}