/* A-GLOW Design Tokens — Admin Dashboard
   Extracted from the A-Play design system for standalone use.
   Keep in sync with src/styles/base.css and src/frame/glow/tokens.ts */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;900&family=DM+Sans:opsz,wght@9..40,400;9..40,500&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* Backgrounds */
  --bg-base: #070810;
  --bg-surface: #0d0f1e;
  --bg-raised: #141728;
  --bg-overlay: #1a1d30;

  /* Borders */
  --border-dim: #1e2238;
  --border-mid: #2a2f4e;
  --border-active: #3d4570;

  /* Accent */
  --accent: #4b6ce2;
  --accent-dim: #3a55cc;
  --accent-glow: rgba(75, 108, 226, 0.2);
  --accent-gold: #f0b429;
  --accent-gold-glow: rgba(240, 180, 41, 0.2);
  --success: #34d399;
  --danger: #f87171;
  --warning: #fbbf24;

  /* Text */
  --text-primary: #e2e6f8;
  --text-secondary: #8088a8;
  --text-muted: #363c5a;
  --text-on-accent: #ffffff;

  /* Shadows */
  --shadow-card: 0 4px 20px rgba(0,0,0,0.45), 0 0 0 1px var(--border-dim);
  --shadow-hover: 0 8px 32px rgba(75,108,226,0.18), 0 0 0 1px var(--border-mid);
  --shadow-focus: 0 0 0 2px var(--accent);
  --shadow-modal: 0 24px 80px rgba(0,0,0,0.75);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* Radius */
  --r-sm: 6px;  --r-md: 10px; --r-lg: 16px;
  --r-xl: 22px; --r-pill: 999px;

  /* Motion */
  --motion-fast: 120ms;
  --motion-hover: 150ms;
  --motion-base: 180ms;
  --motion-modal: 200ms;
  --motion-slide: 220ms;
  --motion-ease: ease;
  --motion-ease-out: ease-out;
  --motion-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Typography */
  --font-display: 'Outfit', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}