:root {
  --color-primary: #5B4FE9;
  --color-primary-deep: #4C3FD6;
  --color-brand: #FF2E6E;
  --color-brand-soft: #FFE8EF;
  --color-bg: #F7F6FC;
  --color-surface: #FFFFFF;
  --color-text: #1A1A2E;
  --color-text-2: #6B6B85;
  --color-text-3: #A0A0B8;
  --color-line: #ECECF4;
  --color-gold: #F5A623;
  --color-success: #22C55E;
  --color-danger: #EF4444;
  --shadow-card: 0 2px 12px rgba(26,26,46,.06);
  --skeleton-shimmer: linear-gradient(90deg,#EFEEF7 25%,#F7F6FC 37%,#EFEEF7 63%);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
  --dur-page: 380ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

[data-theme="dark"] {
  --color-primary: #7C71F0;
  --color-primary-deep: #6A5EE8;
  --color-brand: #FF4D84;
  --color-brand-soft: #3A1E2B;
  --color-bg: #12121C;
  --color-surface: #1B1B2A;
  --color-text: #ECECF4;
  --color-text-2: #A0A0B8;
  --color-text-3: #6B6B85;
  --color-line: #2A2A3D;
  --color-gold: #FFC24B;
  --color-success: #34D399;
  --color-danger: #F87171;
  --shadow-card: 0 2px 12px rgba(0,0,0,.4);
  --skeleton-shimmer: linear-gradient(90deg,#232336 25%,#1B1B2A 37%,#232336 63%);
}

html.theme-transition,
html.theme-transition * {
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

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