/*
  Gladden on the web. Same palette as the app -- src/theme/colors.ts.

  Deliberately loads no webfonts. The app pairs Fraunces with Figtree, and the
  obvious move is to pull both from Google Fonts, but that sends every visitor's
  IP address to Google on a page whose entire subject is not doing that sort of
  thing. A German court has already found exactly that arrangement unlawful. So:
  system stacks, a serif for the warm voice and a sans for everything else, and
  a page that makes no third-party requests at all.
*/

:root {
  --bg: #fff8f0;
  --surface: #fff1e3;
  --text: #3a2a22;
  --muted: #8a6f60;
  --primary: #e8734a;
  --border: #f0dcc8;
  --gold: #a9843a;

  --serif: Fraunces, 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: Figtree, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #231a16;
    --surface: #2e231d;
    --text: #f7ece3;
    --muted: #c4a996;
    --primary: #f08b60;
    --border: #40312a;
    --gold: #cbae72;
  }
}

* {
  box-sizing: border-box;
}

html {
  /* Nothing here is wide enough to need it, and a stray long string in a
     future edit shouldn't be able to shove the whole page sideways. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 5rem;
}

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2rem, 6vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
}

h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.3rem, 4vw, 1.6rem);
  line-height: 1.25;
  margin: 3rem 0 0.75rem;
}

p {
  margin: 0 0 1.1rem;
}

a {
  color: var(--primary);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

strong {
  font-weight: 620;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

ul {
  margin: 0 0 1.1rem;
  padding-left: 1.25rem;
}

li {
  margin-bottom: 0.5rem;
}

/* Tables are the one thing here that can genuinely exceed a phone's width, so
   they scroll inside their own box rather than widening the document. */
.table-scroll {
  overflow-x: auto;
  margin: 0 0 1.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.94rem;
}

th,
td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th {
  background: var(--surface);
  font-weight: 620;
  white-space: nowrap;
}

tr:last-child td {
  border-bottom: 0;
}

.prose > p:first-of-type {
  color: var(--muted);
}

.back {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.95rem;
}

/* --- Landing and utility pages --- */

.hero {
  text-align: center;
  padding-top: 4rem;
}

.wordmark {
  font-family: var(--serif);
  font-size: clamp(2.75rem, 11vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0;
}

.tagline {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 4vw, 1.35rem);
  color: var(--muted);
  margin: 0.5rem 0 0;
  font-style: italic;
}

.note {
  color: var(--gold);
  font-size: 0.95rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.card h2 {
  margin-top: 0;
}

.steps {
  counter-reset: step;
  list-style: none;
  padding-left: 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: 1rem;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--primary);
  color: #fff8f0;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  display: grid;
  place-items: center;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 3rem;
  font-size: 0.95rem;
}

.footer {
  margin-top: 4rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
}

.lede {
  margin-top: 3rem;
}

/* The one real control on the site: "Open Gladden" on the auth landing page. */
.open {
  display: inline-block;
  background: var(--primary);
  color: #fff8f0;
  font-weight: 600;
  text-decoration: none;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
}

.open:hover {
  filter: brightness(0.94);
}