/* ═══════════════════════════════════════════ */
/* DEMS — Design tokens (dark scheme)          */
/* The only stylesheet that may contain colour */
/* values, font sizes and layer numbers.       */
/* Rules: docs/wiki/modules/frontend-markup.md */
/* ═══════════════════════════════════════════ */

:root {
  /* Surfaces */
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-card: #16161f;
  --bg-glass: rgba(22, 22, 31, 0.85);
  --bg-glass-hover: rgba(30, 30, 45, 0.9);
  --bg-tint-1: rgba(255, 255, 255, 0.04);
  --bg-tint-2: rgba(255, 255, 255, 0.08);
  --bg-tint-3: rgba(255, 255, 255, 0.12);
  --bg-inset: rgba(0, 0, 0, 0.25);
  --bg-scrim: rgba(10, 10, 15, 0.9);

  /* Text */
  --text-primary: #e4e4e7;
  --text-secondary: #a1a1aa;
  --text-muted: #8f8f9a;

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-accent: rgba(139, 92, 246, 0.3);

  /* Accent: --accent is the brand colour for borders, icons and glows.
     Violet text uses --accent-text, white text sits on --accent-fill. */
  --accent: #8b5cf6;
  --accent-light: #a78bfa;
  --accent-dark: #6d28d9;
  --accent-text: #a78bfa;
  --accent-fill: #7c3aed;
  --accent-fill-hover: #6d28d9;
  --on-accent: #ffffff;
  --accent-tint-1: rgba(139, 92, 246, 0.08);
  --accent-tint-2: rgba(139, 92, 246, 0.15);
  --accent-glow: rgba(139, 92, 246, 0.4);

  /* Status: text colour, tint, border, solid fill, text on the fill */
  --success: #22c55e;
  --success-bg: rgba(34, 197, 94, 0.15);
  --success-border: rgba(34, 197, 94, 0.3);
  --success-fill: #22c55e;
  --on-success: #0a0a0f;
  --warning: #eab308;
  --warning-bg: rgba(234, 179, 8, 0.15);
  --warning-border: rgba(234, 179, 8, 0.3);
  --warning-fill: #eab308;
  --on-warning: #0a0a0f;
  --danger: #f87171;
  --danger-bg: rgba(239, 68, 68, 0.15);
  --danger-border: rgba(239, 68, 68, 0.3);
  --danger-fill: #dc2626;
  --danger-fill-hover: #b91c1c;
  --on-danger: #ffffff;
  --info: #06b6d4;
  --info-bg: rgba(6, 182, 212, 0.15);
  --info-border: rgba(6, 182, 212, 0.3);
  --info-fill: #06b6d4;
  --on-info: #0a0a0f;

  /* Discord brand */
  --discord: #5865f2;
  --discord-hover: #4752c4;
  --on-discord: #ffffff;

  /* Typography */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-logo: 'UnifrakturCook', cursive;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --font-size-display: clamp(2.5rem, 7vw, 4.5rem);
  --font-size-logo: clamp(3rem, 8vw, 6rem);

  /* Spacing: the name is the size in pixels */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --space-64: 4rem;

  /* Radius */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Layers, aligned with Bootstrap's z-index scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-nav: 1030;
  --z-banner: 1040;
  --z-dialog: 1055;
  --z-toast: 1090;
  --z-overlay: 2000;

  /* Shadows */
  --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 30px rgba(139, 92, 246, 0.15);
  --shadow-ring: 0 0 0 3px var(--accent-glow);

  /* Motion */
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: all var(--duration-base) var(--ease-standard);
}