/* ================================================================
   STRK — Design System Tokens
   Generated by Brand Wizard
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    /* ── Surfaces ─────────────────────────────────────────────── */
    --bg: #050d24;
    --bg-alt: #0b132a;
    --panel: #0d152c;
    --panel-alt: #141c33;
    --surface-hover: rgba(255, 255, 255, .04);

    /* ── Text ─────────────────────────────────────────────────── */
    --text: rgba(250, 250, 248, .92);
    --text-muted: rgba(250, 250, 248, .52);
    --text-subtle: rgba(250, 250, 248, .32);

    /* ── Primary ──────────────────────────────────────────────── */
    --primary: #3b9bff;
    --primary-hover: #2787eb;
    --primary-soft: rgba(59, 155, 255, .08);
    --primary-ring: rgba(59, 155, 255, .14);
    --primary-muted: rgba(59, 155, 255, .45);
    --primary-glow: rgba(59, 155, 255, .10);

    /* ── Status ───────────────────────────────────────────────── */
    --success: #22c55e;
    --success-soft: rgba(34, 197, 94, .08);
    --warning: #eab308;
    --warning-soft: rgba(234, 179, 8, .08);
    --danger: #ef4444;
    --danger-soft: rgba(239, 68, 68, .08);
    --info: #8b5cf6;
    --info-soft: rgba(139, 92, 246, .08);

    /* ── Borders ──────────────────────────────────────────────── */
    --border: rgba(255, 255, 255, .06);
    --border-hover: rgba(255, 255, 255, .12);
    --border-color: rgba(255, 255, 255, .06);
    --border-subtle: rgba(255, 255, 255, .03);
    --border-strong: rgba(59, 155, 255, .16);

    /* ── Shadows ──────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .2);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, .25);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, .3);
    --shadow-xl: 0 8px 32px rgba(0, 0, 0, .35);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, .2);
    --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, .12);
    --glow-primary: 0 0 0 1px rgba(59, 155, 255, .12), 0 0 20px rgba(59, 155, 255, .06);

    /* ── Typography ───────────────────────────────────────────── */
    --font-2xs: 0.6875rem;
    --font-xs: 0.75rem;
    --font-sm: 0.8125rem;
    --font-md: 0.875rem;
    --font-base: 0.9375rem;
    --font-lg: 1.0625rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    --font-3xl: 2rem;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
    --lh-tight: 1.25;
    --lh-normal: 1.5;
    --lh-relaxed: 1.6;

    /* ── Spacing — 4px grid ───────────────────────────────────── */
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* ── Radii ─────────────────────────────────────────────────── */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 16px;
    --radius-2xl: 16px;
    --radius-full: 9999px;

    /* ── Transitions ──────────────────────────────────────────── */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;

    /* ── Component Tokens ─────────────────────────────────────── */
    --input-height: 44px;
    --btn-height: 44px;
    --btn-height-compact: 34px;
    --navbar-height: 60px;
    --container-max: 1320px;
    --sidebar-width: 0px;

    /* ── Z-Index ──────────────────────────────────────────────── */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 500;
    --z-toast: 900;
}