/* ========================================
   BEAMX1 Demo v2 — Design Tokens
   Dark/Light theme + BEAM green / Engine blue
   ======================================== */

:root {
    /* === Brand Colors === */
    --beam: #10b981;
    --beam-hover: #059669;
    --beam-glow: rgba(16, 185, 129, 0.25);
    --beam-soft: rgba(16, 185, 129, 0.10);
    --engine: #0066ff;
    --engine-glow: rgba(0, 102, 255, 0.25);

    /* === Semantic === */
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;

    /* === Typography === */
    --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --font-display: 'Syne', 'Outfit', sans-serif;

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

    /* === Radius === */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* === Transitions === */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --duration: 0.25s;
    --duration-slow: 0.5s;
}

/* ========================================
   Dark Theme (default)
   ======================================== */
[data-theme="dark"] {
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-tertiary: #1a1a1a;
    --bg-card: #151515;
    --bg-card-hover: #1c1c1c;
    --bg-input: #0f0f0f;
    --bg-overlay: rgba(0, 0, 0, 0.7);

    --text-primary: #f0f0f0;
    --text-secondary: #a0a0a0;
    --text-muted: #555555;
    --text-inverse: #0a0a0a;

    --border: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.15);
    --border-focus: var(--beam);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 40px var(--beam-glow);

    color-scheme: dark;
}

/* ========================================
   Light Theme
   ======================================== */
[data-theme="light"] {
    --bg-primary: #f8f8f8;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f0f0f0;
    --bg-card: #ffffff;
    --bg-card-hover: #f5f5f5;
    --bg-input: #ffffff;
    --bg-overlay: rgba(255, 255, 255, 0.8);

    --text-primary: #111111;
    --text-secondary: #555555;
    --text-muted: #999999;
    --text-inverse: #f0f0f0;

    --border: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(0, 0, 0, 0.15);
    --border-focus: var(--beam);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 40px rgba(16, 185, 129, 0.15);

    color-scheme: light;
}