/* Shared 2026 SaaS / grocery design tokens */
:root {
  --app-bg: #f6f7f9;
  --app-surface: #ffffff;
  --app-surface-2: #f0f2f5;
  --app-text: #111418;
  --app-muted: #6b7280;
  --app-border: rgb(17 20 24 / 8%);
  --app-shadow: 0 1px 2px rgb(17 20 24 / 4%), 0 8px 24px rgb(17 20 24 / 6%);
  --app-shadow-sm: 0 1px 3px rgb(17 20 24 / 5%);
  --app-radius: 16px;
  --app-radius-sm: 12px;
  --app-discount: #c2410c;
  --app-discount-soft: #fff7ed;
  --app-accent: #0d6e4f;
  --app-accent-soft: #e8f5f0;
  --app-max-width: 1200px;
}

.app-page {
  background: var(--app-bg);
  color: var(--app-text);
}

.app-page .header {
  background: rgb(255 255 255 / 88%);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--app-border);
}

.app-page .site-footer--mobile {
  background: rgb(255 255 255 / 92%);
  backdrop-filter: blur(12px);
  border-top-color: var(--app-border);
}

.app-page .site-footer__item--active {
  color: var(--app-accent);
}

.app-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow-sm);
}

.app-card__title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.app-card__lead {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--app-muted);
  line-height: 1.45;
}