/* Remember's vocabulary — the app, on a bigger screen: its values for the
   grammar's keys under html[data-site="remember"], light and dark, taken from
   the app's Round 9 tokens (mobile/src/design/tokens.ts), and its one device,
   the orb (docs/2026-10-19-website-spec.md §4). The display face is the
   system's, as in the app: the app speaks in the device's own voice. */

/* ── Tokens ─────────────────────────────────────────────────────────────── */

html[data-site="remember"] {
  /* Round 9, light: canvas, canvasGlow, surface, ink, inkSecondary,
     inkMuted, accent, accentEnd, accentInk, onAccent, border, borderStrong,
     orbGlow (the glow), and accentTint deepened for a text selection. */
  --canvas: #f4f2ec;
  --canvas-glow: rgba(79, 70, 229, 0.09);
  --surface: #ffffff;
  --ink: #0f172a;
  --ink-secondary: #334155;
  --ink-muted: #5b6475;
  --accent: #4f46e5;
  --accent-end: #0e7490;
  --accent-ink: #4338ca;
  --on-accent: #ffffff;
  --border: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.16);
  --glow: rgba(79, 70, 229, 0.3);
  --selection: rgba(79, 70, 229, 0.18);
  /* Round 9's elevation.orb: its top highlight. */
  --highlight: rgba(255, 255, 255, 0.35);

  --display-family: var(--family-body);
  --weight-display: 800;
  --weight-heading: 700;
  --weight-wordmark: 700;
  --size-wordmark: var(--type-title);
  --tracking-display: -0.03em;
  --tracking-wordmark: -0.01em;

  /* The orb: a disc beside the wordmark, and the hero — Round 9's heroOrb,
     grown with the screen — with its halo 22/96 of the orb's width beyond
     its edge and its drop shadow (elevation.orb: y 10, blur 30). */
  --orb-mark: 1em;
  --orb-hero: clamp(8.75rem, 6rem + 9vw, 12.5rem);
  --orb-halo: calc(var(--orb-hero) * 0.23);
  --orb-shadow: 0 0.625rem 1.875rem var(--glow);
  --orb-mark-shadow: 0 0.125rem 0.5rem var(--glow);
  --orb-breathe: 4s;
}

@media (prefers-color-scheme: dark) {
  html[data-site="remember"] {
    --canvas: #070b14;
    --canvas-glow: rgba(129, 140, 248, 0.18);
    --surface: #0f1628;
    --ink: #e7ebf3;
    --ink-secondary: #cbd5e1;
    --ink-muted: #9aa3b8;
    --accent: #818cf8;
    --accent-end: #22d3ee;
    --accent-ink: #a5b4fc;
    --on-accent: #0b1020;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    --glow: rgba(34, 211, 238, 0.42);
    --selection: rgba(129, 140, 248, 0.3);
    --highlight: rgba(255, 255, 255, 0.35);
  }
}

/* ── The device: the orb ────────────────────────────────────────────────── */

/* In the masthead, the mark: a small disc of the accent gradient. */
.brand-mark {
  flex: none;
  width: var(--orb-mark);
  height: var(--orb-mark);
  border-radius: var(--radius-full);
  background-image: var(--accent-gradient);
  box-shadow: var(--orb-mark-shadow);
}

/* In the hero, the orb breathing: the disc of the accent gradient with its
   top highlight and drop shadow, and behind it its halo, swelling and
   brightening with each breath — Round 9's orbBreathe and orbHaloIdle, one
   loop. The orb is the wrapper; the disc and the halo are drawn in it, the
   halo below the disc. */
.orb {
  position: relative;
  isolation: isolate;
  width: var(--orb-hero);
  height: var(--orb-hero);
  margin-bottom: var(--space-12);
  animation: orb-breathe var(--orb-breathe) var(--ease-in-out) infinite;
}

.orb::before,
.orb::after {
  content: "";
  position: absolute;
  border-radius: var(--radius-full);
}

.orb::before {
  inset: calc(-1 * var(--orb-halo));
  z-index: -1;
  background-image: radial-gradient(closest-side, var(--glow), transparent);
  animation: orb-halo var(--orb-breathe) var(--ease-in-out) infinite;
}

.orb::after {
  inset: 0;
  background-image: var(--accent-gradient);
  box-shadow: inset 0 var(--hairline) 0 var(--highlight), var(--orb-shadow);
}

@keyframes orb-breathe {
  50% {
    transform: scale(1.04);
  }
}

@keyframes orb-halo {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

/* The app's own answer, in the orb's colours. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .utterance-answer .utterance-said {
    background-image: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orb,
  .orb::before {
    animation: none;
  }
}