:root {
  --pocket-orange: #ff6b35;
  --pocket-orange-light: #ff8b5f;
  --pocket-warm-black: #0b0c0e;
  --pocket-graphite: #17181b;
  --pocket-instrument-surface: #191a1d;
  --pocket-control-surface: #202125;
  --pocket-warm-white: #f5f2eb;
  --pocket-muted-warm-gray: #9d9a93;
  --pocket-confirmed-green: #56e39f;
  --pocket-warning-red: #ff7f7f;

  --pocket-font-brand: "Courier New", Courier, ui-monospace, monospace;
  --pocket-font-interface: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pocket-radius-button: 18px;
  --pocket-radius-card: 20px;
  --pocket-touch-target: 48px;
}

.pocket-app {
  min-height: 100%;
  color: var(--pocket-warm-white);
  background: var(--pocket-warm-black);
  font-family: var(--pocket-font-interface);
}

.pocket-brand-badge {
  display: grid;
  width: 42px;
  height: 42px;
  place-content: center;
  border-radius: 13px;
  color: var(--pocket-graphite);
  background: var(--pocket-orange);
  font-family: var(--pocket-font-brand);
  font-weight: 700;
  line-height: 0.88;
  text-align: center;
}

.pocket-brand-badge__ethos { font-size: 12.73px; }
.pocket-brand-badge__unlimited { font-size: 7px; }

.pocket-product-lockup {
  display: flex;
  align-items: center;
  gap: 11px;
}

.pocket-product-lockup__family {
  color: var(--pocket-orange-light);
  font: 700 14px/1 var(--pocket-font-brand);
  letter-spacing: 0.23em;
  text-transform: uppercase;
}

.pocket-product-lockup__name {
  margin-top: 3px;
  color: var(--pocket-warm-white);
  font: 700 20px/1 var(--pocket-font-brand);
}

.pocket-card {
  border-radius: var(--pocket-radius-card);
  background: var(--pocket-instrument-surface);
}

.pocket-button {
  min-height: var(--pocket-touch-target);
  border-radius: var(--pocket-radius-button);
  color: var(--pocket-warm-white);
  background: var(--pocket-control-surface);
}

.pocket-button--primary {
  color: var(--pocket-graphite);
  background: var(--pocket-orange);
}