/* Design tokens — shared across homepage and app shells */

:root {
  --bg: #000000;
  --bg-color: #000000;
  --surface: #0a0a0c;
  --surface-hover: #121216;
  --surface-border: #1f1f23;
  --surface-border-hover: #33333b;
  --text: #ffffff;
  --text-color: #ffffff;
  --text-muted: #888896;
  --text-dim: #a0a0a5;

  --accent-gradient: linear-gradient(135deg, #ff2d55, #ff007f, #8a2be2);
  --accent-gradient-hover: linear-gradient(135deg, #ff456e, #ff2697, #9d42f5);
  --accent-color: #ff007f;
  --accent-rgb: 255, 0, 127;

  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);

  --shadow-glow: rgba(255, 0, 127, 0.15);
  --transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

body.light-mode {
  --bg: #f5f5f7;
  --bg-color: #f5f5f7;
  --surface: #ffffff;
  --surface-hover: #f0f0f5;
  --surface-border: #e2e2ec;
  --surface-border-hover: #c8c8d8;
  --text: #09090b;
  --text-color: #09090b;
  --text-muted: #4b4b54;
  --text-dim: #2e2e33;

  --glass-bg: rgba(0, 0, 0, 0.02);
  --glass-border: rgba(0, 0, 0, 0.08);

  --shadow-glow: rgba(255, 0, 127, 0.08);
}