@import url('./tokens/fonts.css');
@import url('./tokens/colors.css');
@import url('./tokens/typography.css');

* { box-sizing: border-box; }
:root { --landing-bg: #040d08; --landing-muted: #a8b8ad; }
html { background: var(--gray-50); color-scheme: light; }
html.selected { background: var(--landing-bg); color-scheme: dark; }
body { margin: 0; font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
::selection { background: var(--spruce-200); color: var(--gray-950); }
.variant { position: relative; min-height: 420px; height: 100svh; isolation: isolate; color: var(--fg-1); background: var(--bg-subtle); }
.wordmark { margin: 0; font-family: var(--font-brand); font-weight: 600; letter-spacing: var(--brand-tracking); line-height: 1; }
.status { margin: 0; font-size: 14px; font-weight: var(--weight-regular); line-height: 20px; letter-spacing: .025em; color: var(--fg-2); }

/* 1 — A quiet signature. */
.variant--center { display: grid; place-items: center; padding: 40px; }
.signature { text-align: center; padding-bottom: 24px; }
.signature .wordmark { font-size: clamp(88px, 16vw, 248px); }
.signature .status { margin-top: 28px; }

/* 2 — The name as the entire composition. */
.variant--monument { --bg-app: var(--landing-bg); --fg-2: var(--landing-muted); background: var(--bg-app); }
.variant--monument .status { position: absolute; top: 40px; left: 40px; }
.variant--monument .wordmark { position: absolute; left: 40px; bottom: 80px; font-size: clamp(100px, 30.5vw, 580px); }
.physical-logo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.has-physical-logo .wordmark { user-select: none; cursor: default; }
.has-physical-logo[data-logo-state="responding"] .wordmark { opacity: 0; }
.has-physical-logo[data-logo-state="responding"] .physical-logo { opacity: 1; }
.has-physical-logo[data-flow-state="connecting"] .physical-logo { opacity: 1; }
.has-physical-logo .status { z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .physical-logo { display: none; }
  .has-physical-logo .wordmark { opacity: 1; }
}

/* 3 — An off-center signature in the brand accent. */
.variant--offset { background: var(--spruce-900); color: var(--spruce-50); }
.variant--offset .wordmark { position: absolute; left: 8vw; top: 34%; font-size: clamp(88px, 20vw, 340px); }
.variant--offset .status { position: absolute; right: 8vw; bottom: 8vh; color: var(--spruce-200); }

/* Review controls; absent from the standalone pages. */
.variant-picker { position: fixed; z-index: 10; right: 24px; top: 24px; display: flex; padding: 2px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 6px; }
.variant-picker a { display: grid; place-items: center; min-width: 40px; min-height: 40px; color: var(--gray-600); text-decoration: none; font-size: 13px; font-weight: 520; border-radius: 3px; }
.variant-picker a:hover { color: var(--gray-900); background: var(--gray-100); }
.variant-picker a[aria-current="true"] { background: var(--gray-900); color: var(--gray-50); }
.variant-picker a:focus-visible { outline: 2px solid var(--spruce-500); outline-offset: 2px; }

@media (max-width: 640px) {
  .variant--center { padding: 24px; }
  .signature .wordmark { font-size: 24vw; }
  .signature .status { margin-top: 24px; }
  .status { font-size: 13px; }
  .variant--monument .status { top: 28px; left: 24px; }
  .variant--monument .wordmark { left: 24px; bottom: 40px; font-size: 29.5vw; }
  .variant--offset .wordmark { left: 24px; top: 34%; font-size: 25vw; }
  .variant--offset .status { right: 24px; bottom: 40px; }
  .variant-picker { right: 16px; top: 16px; }
}