/**
 * FrenzyGo — shared brand tokens + app-shell alignment with premium marketing UI.
 *
 * Loaded after app.css on standard pages; standalone marketing pages pull this
 * immediately before brand-landing.css (`:root` must exist before LP rules resolve).
 */

:root {
  --fg-brand-bg: #f8f9f8;
  --fg-brand-surface: #ffffff;
  --fg-brand-ink: #0c0f0e;
  --fg-brand-muted: #5f6562;
  --fg-brand-soft: #8b918e;
  --fg-brand-accent: #16a34a;
  --fg-brand-accent-2: #22c55e;
  --fg-brand-glow: rgba(22, 163, 74, 0.12);
  --fg-brand-radius-lg: clamp(22px, 4vw, 28px);
  --fg-brand-radius-md: 16px;
  --fg-brand-radius-sm: 12px;
  --fg-brand-shadow-sm: 0 1px 2px rgba(15, 20, 18, 0.04),
    0 6px 20px rgba(15, 20, 18, 0.05);
  --fg-brand-shadow-md: 0 4px 8px rgba(15, 20, 18, 0.04),
    0 20px 50px rgba(15, 20, 18, 0.08);
  --fg-brand-font: 'Inter', system-ui, -apple-system, sans-serif;

  /* Unify Semantic / app skins with LP typography & canvas */
  --fg-font-sans: var(--fg-brand-font);
  --fg-bg: var(--fg-brand-bg);
}

body.fg-app {
  background-color: var(--fg-bg);
  background-image: radial-gradient(
    ellipse 120% 80% at 50% -20%,
    rgba(22, 163, 74, 0.065),
    transparent 55%
  );
  background-attachment: fixed;
}

@media (prefers-reduced-motion: reduce) {
  body.fg-app *,
  body.fg-app *::before {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}