/* =================================================================
   BayMetrics Design Tokens
   Shared CSS custom properties used across all pages.
   ================================================================= */

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

:root {
    --bg-primary: #0a0e17;
    --bg-secondary: #0f1520;
    --bg-card: rgba(255,255,255,0.03);
    --bg-card-hover: rgba(255,255,255,0.06);
    --bg-elevated: rgba(255,255,255,0.05);
    --text-primary: #f0f4f8;
    --text-secondary: #8b97a8;
    --text-dim: #5a6578;
    --accent: #22c55e;
    --accent-hover: #16a34a;
    --accent-dim: rgba(34,197,94,0.12);
    --accent-glow: 0 0 20px rgba(34,197,94,0.3), 0 0 60px rgba(34,197,94,0.1);
    --red: #ef4444;
    --red-dim: rgba(239,68,68,0.12);
    --amber: #f59e0b;
    --amber-dim: rgba(245,158,11,0.12);
    --blue: #3b82f6;
    --blue-dim: rgba(59,130,246,0.12);
    --purple: #a855f7;
    --purple-dim: rgba(168,85,247,0.12);
    --teal: #14b8a6;
    --teal-dim: rgba(20,184,166,0.12);
    --border: rgba(255,255,255,0.06);
    --border-light: rgba(255,255,255,0.1);
    --border-accent: rgba(34,197,94,0.3);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 20px rgba(34,197,94,0.15);
}