/* =========================================================
   MIDNIGHT LOBBY — Design Tokens
   Premium Habbo × Apple × Linear
   ========================================================= */
:root {
  /* Surfaces */
  --bg-void: #05070d;
  --bg-deep: #0a0f1a;
  --bg-elevated: #111827;
  --bg-panel: #0d1422;
  --bg-glass: rgba(255, 255, 255, 0.04);
  --bg-glass-strong: rgba(255, 255, 255, 0.07);
  --bg-glass-hover: rgba(255, 255, 255, 0.1);

  /* Text */
  --text-primary: #f4f7fb;
  --text-secondary: #9aa8bc;
  --text-muted: #6b778c;
  --text-inverse: #0a0f1a;

  /* Brand */
  --brand-gold: #e8c547;
  --brand-gold-hi: #f5d76e;
  --brand-gold-lo: #b8962e;
  --brand-cyan: #3ecfef;
  --brand-cyan-dim: rgba(62, 207, 239, 0.15);
  --brand-violet: #7c6cf0;
  --brand-violet-dim: rgba(124, 108, 240, 0.18);

  /* States */
  --hover-gold: #ffe08a;
  --hover-surface: rgba(255, 255, 255, 0.08);
  --danger: #ff5c6c;
  --danger-bg: rgba(255, 92, 108, 0.12);
  --success: #3dd68c;

  /* Shadows & glow */
  --shadow-soft: 0 24px 80px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 16px 48px rgba(0, 0, 0, 0.4);
  --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.35);
  --glow-gold: 0 0 48px rgba(232, 197, 71, 0.28);
  --glow-cyan: 0 0 40px rgba(62, 207, 239, 0.25);
  --glow-violet: 0 0 48px rgba(124, 108, 240, 0.3);

  /* Borders */
  --border-hair: rgba(255, 255, 255, 0.08);
  --border-soft: rgba(255, 255, 255, 0.12);
  --border-gold: rgba(232, 197, 71, 0.4);

  /* Radii */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* Type */
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-ui: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur-med: 400ms;
  --dur-slow: 800ms;

  /* Layout */
  --max: 1200px;
  --nav-h: 76px;
  --gutter: clamp(16px, 4vw, 32px);
}