/* =========================================
   Design Tokens
   ========================================= */
:root,
.theme-dark,
[data-theme="dark"] {
  color-scheme: dark;

  /* semantic tokens */
  --background: #060915;
  --foreground: #ecf3ff;
  --surface-1: #0f1728;
  --surface-2: #15213a;
  --surface-3: #1d2b49;
  --primary: #56a3ff;
  --primary-foreground: #031229;
  --secondary: #f2bc4a;
  --secondary-foreground: #2c1f02;
  --muted: #98aac8;
  --border: #30405e;
  --ring: #79b6ff;
  --success: #30c38d;
  --warning: #ffb44f;
  --danger: #ff6b76;
  --info: #7aa2ff;
  --whatsapp: #25d366;

  --radius: 12px;
  --radius-sm: 10px;
  --radius-lg: 16px;

  --gradient-primary: linear-gradient(135deg, #4d8fff 0%, #63b3ff 52%, #7dd5ff 100%);
  --gradient-subtle: radial-gradient(110% 110% at 0% 0%, rgba(86, 163, 255, 0.22) 0%, rgba(86, 163, 255, 0.04) 45%, transparent 100%);
  --gradient-header: linear-gradient(180deg, rgba(15, 27, 52, 0.95) 0%, rgba(11, 18, 35, 0.92) 100%);

  --shadow-card: 0 12px 30px rgba(3, 8, 20, 0.45);
  --shadow-card-hover: 0 20px 40px rgba(5, 12, 28, 0.55);
  --shadow-glow: 0 0 0 1px rgba(121, 182, 255, 0.18), 0 12px 30px rgba(46, 141, 255, 0.22);
  --shadow-soft: 0 6px 18px rgba(2, 7, 18, 0.35);

  --font-display: "Sora", "Avenir Next", "Trebuchet MS", sans-serif;
  --font-body: "Manrope", "Segoe UI", "Noto Sans", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --motion-fast: 120ms;
  --motion-normal: 180ms;
  --motion-slow: 280ms;

  /* legacy aliases (compat) */
  --bg-app: var(--background);
  --bg-card: var(--surface-2);
  --bg-input: var(--surface-3);
  --text-main: var(--foreground);
  --text-muted: var(--muted);
  --primary-hover: #7ab9ff;
  --shadow-sm: var(--shadow-soft);
  --shadow-md: var(--shadow-card);
  --font-title-lg: 18px;
  --font-title-md: 15px;
  --font-value-lg: 16px;
  --font-value-md: 14px;
  --font-label: 11px;
  --font-micro: 10px;
}

.theme-light,
[data-theme="light"] {
  color-scheme: light;

  --background: #f3f7ff;
  --foreground: #0e1b34;
  --surface-1: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #edf2fb;
  --primary: #2b78e8;
  --primary-foreground: #f7fbff;
  --secondary: #f6b73d;
  --secondary-foreground: #2f2000;
  --muted: #5f7599;
  --border: #cad6ea;
  --ring: #3b82f6;
  --success: #139f6b;
  --warning: #e9981d;
  --danger: #dc4c63;
  --info: #3766d9;

  --gradient-primary: linear-gradient(135deg, #2b78e8 0%, #4097f8 55%, #5fc4ff 100%);
  --gradient-subtle: radial-gradient(110% 110% at 0% 0%, rgba(43, 120, 232, 0.18) 0%, rgba(43, 120, 232, 0.06) 45%, transparent 100%);
  --gradient-header: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 250, 255, 0.95) 100%);

  --shadow-card: 0 10px 24px rgba(20, 43, 78, 0.12);
  --shadow-card-hover: 0 16px 32px rgba(20, 43, 78, 0.18);
  --shadow-glow: 0 0 0 1px rgba(59, 130, 246, 0.14), 0 8px 22px rgba(59, 130, 246, 0.18);
  --shadow-soft: 0 4px 14px rgba(24, 43, 72, 0.1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}