/* Design tokens for the white/orange dashboard system.
   Keep this layer small and stable; component files consume these variables. */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #fff7ed;
  --bg-glass: #f8fafc;
  --bg-glass-hover: #fff7ed;
  --bg-color: #f8fafc;
  --bg-hover: #f8fafc;

  --border-color: #e7e5e4;
  --border-active: rgba(249, 115, 22, 0.34);

  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #8a8f98;

  --accent-blue: #f97316;
  --accent-purple: #fb923c;
  --accent-cyan: #ea580c;
  --accent-green: #059669;
  --accent-amber: #f97316;

  --gradient-primary: linear-gradient(180deg, #fb923c, #f97316);
  --gradient-bg: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);

  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.04);
  --shadow-card-hover: 0 10px 24px rgba(15, 23, 42, 0.06);
  --shadow-glow: 0 20px 60px rgba(249, 115, 22, 0.08);

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg-primary: #0f172a;
  --bg-secondary: #111827;
  --bg-card: #151b2a;
  --bg-card-hover: #1f2937;
  --bg-glass: #111827;
  --bg-glass-hover: rgba(255, 255, 255, 0.07);
  --bg-color: #0f172a;
  --bg-hover: #111827;

  --border-color: rgba(148, 163, 184, 0.18);
  --border-active: rgba(249, 115, 22, 0.34);

  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;

  --accent-blue: #fb923c;
  --accent-purple: #fdba74;
  --accent-cyan: #fed7aa;

  --gradient-primary: linear-gradient(180deg, #fb923c, #f97316);
  --gradient-bg: linear-gradient(180deg, #0f172a 0%, #111827 100%);
}

body {
  background: var(--bg-color) !important;
  color: var(--text-primary);
}

body,
button,
input,
select,
textarea,
.topbar-left h2,
.brand-text,
.date-btn,
.pos-btn,
.view-btn,
.creative-mode-btn {
  letter-spacing: 0 !important;
}