/* Design tokens sampled from the QON pitch deck (QON - Beyond PPO Discounts).
   Same variable names as styles/tokens.css so styles/main.css works unchanged. */

:root {
  /* Text */
  --color-text-primary: #000000e6;
  --color-text-secondary: #666666;
  --color-text-ink: #0a1c47;
  --color-text-muted: #8d8d8d;

  /* Backgrounds / surfaces */
  --color-bg-page: #f1f2f4;
  --color-bg-surface: #ffffff;
  --color-bg-surface-alt: #f5f6f8;

  /* Brand */
  --color-brand-dark: #0a1c47;
  --color-brand-blue: #00afef;
  --color-brand-accent: #f96e1a;
  --color-brand-accent-tint: #f96e1a26;

  /* Accents (feature card icons/tags) */
  --color-accent-pink: #f96e1a;
  --color-accent-purple: #5c83c4;
  --color-accent-green: #00af50;
  --color-accent-red: #f96e1a;

  /* Accent tints (~16% opacity washes for badges/backgrounds) */
  --color-brand-blue-tint: #00afef26;
  --color-accent-pink-tint: #f96e1a26;
  --color-accent-purple-tint: #5c83c426;
  --color-accent-green-tint: #00af5026;
  --color-accent-red-tint: #f96e1a26;
}

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

body {
  font-family: sans-serif;
  font-size: 12px;
  -webkit-font-smoothing: antialiased;
  color: var(--color-text-primary);
  background: var(--color-bg-page);
}