:root {
  --bg-primary: #0b1020;
  --bg-secondary: #11182d;
  --bg-panel: #161f38;
  --bg-panel-hover: #1c2848;
  --bg-glass: rgba(22, 31, 56, 0.86);
  --bg-overlay: rgba(2, 6, 18, 0.68);

  --brand-blue: #4da3ff;
  --brand-cyan: #33e6ff;
  --brand-purple: #7a5cff;
  --brand-product: #a855f7;

  --text-primary: #f5f7ff;
  --text-secondary: #b8c2e0;
  --text-tertiary: #7d89a8;
  --text-disabled: #56627d;
  --text-inverse: #08111f;

  --border-soft: rgba(255, 255, 255, 0.06);
  --border-default: rgba(125, 137, 168, 0.18);
  --border-strong: rgba(125, 137, 168, 0.28);
  --border-active: rgba(77, 163, 255, 0.45);
  --border-focus: rgba(51, 230, 255, 0.62);

  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #38bdf8;

  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.22);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.42);
  --glow-blue: 0 0 24px rgba(77, 163, 255, 0.18);
  --glow-cyan: 0 0 24px rgba(51, 230, 255, 0.18);
  --glow-purple: 0 0 24px rgba(122, 92, 255, 0.18);

  --gradient-primary: linear-gradient(135deg, #33e6ff, #4da3ff);
  --gradient-accent: linear-gradient(135deg, #33e6ff, #4da3ff, #7a5cff);
  --gradient-active: linear-gradient(90deg, #33e6ff, #7a5cff);
}