/* Lythouse base + components for the static marketing pages (landing/).
 * Requires tokens.css. The apps get the same objects through the Tailwind preset.
 *
 * Shape rule, applied everywhere:
 *   frames, cards, images ...... square (--radius-frame)
 *   buttons, inputs, tags ...... 6px   (--radius-control)
 *   the nav pill ............... round (--radius-pill), and nothing else
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

::selection {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Type ---------- */

.type-heavy,
.type-thin {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
}
.type-heavy {
  font-weight: var(--display-heavy);
}
.type-thin {
  font-weight: var(--display-thin);
}

/* A headline is a stack of lines alternating heavy and thin. */
.headline {
  margin: 0;
  font-size: var(--text-display);
  line-height: var(--leading-display);
  text-wrap: balance;
}
.headline > span {
  display: block;
}

.lede {
  max-width: 46ch;
  color: var(--color-ink-muted);
  font-size: var(--text-lg);
  margin: 0;
}

.mono,
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* SplitText line masks */
.reveal-line {
  padding-bottom: 0.04em;
}

/* ---------- Buttons ---------- */

.btn {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-ink);
  --btn-line: var(--color-line-strong);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: var(--border) solid var(--btn-line);
  border-radius: var(--radius-control);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 500 var(--text-sm) / 1 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.btn:hover {
  --btn-bg: var(--color-surface-sunken);
}
.btn:active {
  transform: translateY(1px);
}
.btn svg {
  width: 1.125em;
  height: 1.125em;
  flex: none;
}

.btn-primary {
  --btn-bg: var(--color-accent);
  --btn-fg: var(--color-accent-ink);
  --btn-line: var(--color-accent);
}
.btn-primary:hover {
  --btn-bg: var(--color-accent-hover);
  --btn-line: var(--color-accent-hover);
}

/* The boxed CTA: label, then the arrow in its own square on the right. */
.btn-cta {
  padding: 0 0 0 var(--space-4);
  gap: 0;
  overflow: hidden;
}
.btn-cta .btn-label {
  padding-right: var(--space-4);
}
.btn-cta .btn-arrow {
  display: grid;
  place-items: center;
  align-self: stretch;
  width: 44px;
  border-left: var(--border) solid currentColor;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.btn-cta svg {
  transition: transform var(--dur-base) var(--ease-out);
}
.btn-cta:hover svg {
  transform: translate(2px, -2px);
}

.btn[aria-disabled="true"],
.btn:disabled {
  --btn-bg: transparent;
  --btn-fg: var(--color-ink-muted);
  --btn-line: var(--color-line);
  cursor: not-allowed;
  transform: none;
}

/* ---------- Nav pill ---------- */

.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border: var(--border) solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}
.nav-pill a {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.nav-pill a:hover,
.nav-pill a[aria-current="page"] {
  background: var(--color-surface-sunken);
  color: var(--color-ink);
}

/* ---------- Forms ---------- */

.field {
  display: grid;
  gap: var(--space-2);
}
.field label {
  font-size: var(--text-sm);
  font-weight: 500;
}
.field input,
.field textarea,
.field select {
  min-height: 44px;
  padding: 0 var(--space-3);
  border: var(--border) solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
}
.field input::placeholder {
  color: var(--color-ink-subtle);
}
.field input:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 0;
  border-color: transparent;
}
.field .hint {
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  margin: 0;
}
.field .error {
  color: var(--color-danger);
  font-size: var(--text-sm);
  margin: 0;
}
.field input[aria-invalid="true"] {
  border-color: var(--color-danger);
}

/* ---------- The frame: the signature object ---------- */

.frame {
  --frame-color: var(--color-line-strong);
  position: relative;
  border: var(--frame-width) solid var(--frame-color);
  border-radius: var(--radius-frame);
  background: var(--color-surface);
}
.frame-accent {
  --frame-color: var(--color-accent);
}

/* Tilted print: a framed screenshot with a caption strip, used in loose piles. */
.print {
  margin: 0;
  padding: var(--space-3) var(--space-3) 0;
  background: var(--color-surface);
  border: var(--border) solid var(--color-line);
  box-shadow: var(--shadow-lift);
  transform: rotate(var(--tilt, 0deg));
}
.print figcaption {
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* ---------- The dark block ---------- */

.block-dark {
  background: var(--color-block);
  color: var(--color-block-ink);
}
.block-dark .lede {
  color: color-mix(in srgb, var(--color-block-ink) 72%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}