:root {
  --color-primary: #5634B8;
  --color-accentLime: #DDF568;
  --color-accentCoral: #F47B62;
  --color-background: #F7F4ED;
  --color-surface: #FFFFFF;
  --color-text: #241B35;
  --color-muted: #655D70;
  --color-border: #82788E;
  --color-borderSoft: #E5DFEC;
  --color-primarySoft: #EEE8F8;
  --color-success: #246B46;
  --color-successBg: #E8F4EC;
  --color-warning: #765100;
  --color-warningBg: #FFF2CE;
  --color-danger: #A22C3A;
  --color-dangerBg: #FCEAEC;
  --font-display: "Trebuchet MS", Arial, sans-serif;
  --font-body: Arial, sans-serif;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --radius-control: 12px;
  --radius-card: 16px;
  --radius-modal: 24px;
  --motion-fast: 160ms;
}
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
[data-surface="dark"] :focus-visible { outline-color: var(--color-accentLime); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }