/* Shared tokens. Each surface carries its own layout CSS -- they are three
   very different things (a phone form, a phone queue, a television). */

:root {
  --ink: #150b06;
  --ink-2: #24130b;
  --ink-3: #34200f;
  --cream: #fff4e0;
  --cream-dim: #cdb89a;
  --amber: #f4a02c;
  --ember: #e2482d;
  --go: #4ba85f;
  --stop: #d64a3a;
  --radius: 16px;
  --display: 900 1em/0.95 ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
    Roboto, 'Helvetica Neue', sans-serif;
  --body: 400 1em/1.5 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font: var(--body);
  background: var(--ink);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.display {
  font: var(--display);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  opacity: 0.85;
}

.btn {
  font: var(--body);
  font-weight: 800;
  border: 0;
  border-radius: var(--radius);
  padding: 1.15rem 1.5rem;
  font-size: 1.05rem;
  cursor: pointer;
  width: 100%;
  transition: transform 0.08s ease, filter 0.15s ease;
}

.btn:active {
  transform: scale(0.985);
}

.btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.btn-primary {
  background: linear-gradient(180deg, var(--amber), #e08a1a);
  color: var(--ink);
}

.btn-ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(255, 244, 224, 0.28);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}