/* Documented values from docs/design/tokens.md.
   Keep in sync with apps/web/lib/theme/tokens.dart. */
:root {
  --color-primary: #7C3AED;
  --color-primary-dark: #5B21B6;
  --color-accent: #F472B6;
  --color-gold: #E8B86D;
  --color-canvas-catalog: #FFF0F7;
  --color-canvas-ops: #F3EEFF;
  --color-gradient-catalog-top: #FFE4F1;
  --color-gradient-catalog-bottom: #FFF7FB;
  --color-gradient-ops-top: #EDE4FF;
  --color-gradient-ops-bottom: #F8F5FF;
  --color-sparkle: #FDE68A;
  --color-ink: #3B0764;
  --color-on-primary: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-outline: #E9D5FF;
  --color-status-pending: #F59E0B;
  --color-status-in-transit: #2563EB;
  --color-status-validated: #059669;
  --color-status-failed: #DC2626;

  --font-body: "Nunito", system-ui, sans-serif;
  --font-display: "Comfortaa", system-ui, sans-serif;

  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --radius-card: 24px;
  --radius-pill: 28px;
  --tap-target-min: 44px;

  --breakpoint-compact-max: 599px;
  --breakpoint-medium-max: 1023px;
  --breakpoint-expanded-min: 1024px;
}

.mood-catalog {
  background-color: var(--color-canvas-catalog);
}

.mood-ops {
  background-color: var(--color-canvas-ops);
}