/* Guest theme tokens for /about, /contact, /privacy, and /terms.
   Same names and hexes as src/index.css and src/lib/accentTheme.ts.
   Light is the unset default. html[data-theme] comes from
   public/guest-theme.js (feelingflexi.v1). Button labels use --ff-ink. */
:root {
  color-scheme: light;
  --ff-accent: #8b5cf6;
  --ff-accent-dark: #7c3aed;
  --ff-on-accent: var(--ff-ink);
  --ff-accent-fg: #5b21b6;
  --ff-ink: #1c1428;
  --ff-ink-muted: rgba(28, 20, 40, 0.64);
  --ff-accent-label: color-mix(in srgb, var(--ff-accent-dark) 72%, #1c1428);
  --ff-shell-top: #fbf8ff;
  --ff-shell-mid: #f3eef9;
  --ff-shell-bot: #e7dff2;
  --ff-surface: rgba(255, 255, 255, 0.78);
  --ff-line: rgba(48, 32, 72, 0.14);
  /* Same floating pill as the app shell (light). #9a93a6 was about
     2.6:1 on this shell. #6b6478 clears 3:1 on the frosted pill. */
  --ff-tab-pill-ink: #6b6478;
  --ff-tab-pill-bg: rgba(255, 255, 255, 0.5);
  --ff-tab-pill-border: rgba(48, 32, 72, 0.12);
  --ff-tab-pill-shadow: 0 8px 24px rgba(28, 20, 40, 0.12);
}

html[data-theme='dark'] {
  color-scheme: dark;
  --ff-ink: #faf7fb;
  --ff-ink-muted: rgba(255, 255, 255, 0.62);
  --ff-accent-label: color-mix(in srgb, var(--ff-accent) 55%, white);
  --ff-shell-top: #1a1024;
  --ff-shell-mid: #120a18;
  --ff-shell-bot: #0a0610;
  --ff-surface: rgba(255, 255, 255, 0.06);
  --ff-line: rgba(255, 255, 255, 0.12);
  --ff-accent-fg: #ede9fe;
  --ff-tab-pill-ink: rgba(255, 255, 255, 0.55);
  --ff-tab-pill-bg: rgba(18, 10, 28, 0.5);
  --ff-tab-pill-border: rgba(255, 255, 255, 0.16);
  --ff-tab-pill-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

/* Same shell as Profile (.app-shell and the profile scroller):
   top fades into mid and holds. Do not fade to --ff-shell-bot —
   that is the darker footer band the app shell stopped painting.
   The accent only tints the top wash, the same way Profile keeps
   the shell and puts the accent on links and buttons.
   background-color is its own longhand so a browser that drops
   color-mix still paints the shell, not the canvas. */
html {
  min-height: 100%;
  min-height: 100dvh;
  background-color: var(--ff-shell-mid);
  color: var(--ff-ink);
  background-image:
    radial-gradient(42rem 18rem at 50% -8%, color-mix(in srgb, var(--ff-accent) 28%, transparent), transparent 60%),
    linear-gradient(
      to bottom,
      var(--ff-shell-top) 0%,
      var(--ff-shell-mid) 55%,
      var(--ff-shell-mid) 100%
    );
}
body {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  background-color: transparent;
  color: var(--ff-ink);
}