/* Inkword, shared across the site: the landing page, sign-in and the app. */

:root {
  --bg: #FFFFFF;
  --text: #111418;
  --muted: #6B7076;
  --line: #E8E6E1;
  --wash: #F5F4F1;      /* an empty frame, before anything is drawn */
  --accent: #2C4BFF;
  --display: "Young Serif", "Iowan Old Style", Georgia, serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --fast: 140ms;
  --base: 240ms;
  --slow: 450ms;
  --col: 1160px;
  --hair: 1px;

  /* One vertical rhythm for the whole site. A heading belongs to the content
     below it, so --l (head to content) is far smaller than --2xl (section to
     section). See docs/landing-page.md §3. */
  --space-xs: 10px;
  --space-s: 18px;
  --space-m: 32px;
  --space-l: 72px;
  --space-xl: 112px;
  --space-2xl: 176px;
}
@media (min-resolution: 2dppx) { :root { --hair: 0.5px; } }
@media (max-width: 860px) {
  :root { --space-s: 16px; --space-m: 28px; --space-l: 52px; --space-xl: 72px; --space-2xl: 104px; }
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--text); color: #fff; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -0.012em; }
h2 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.14; text-wrap: balance; }

/* The column. No side rules: they boxed the page in. Structure comes from the
   horizontal rules between sections and from the white space itself. */
.col {
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
}

.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 20px;
}

.word { font-family: var(--display); font-size: 20px; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 9px; }
.word svg { width: 22px; height: 22px; border-radius: 5px; }

/* The one input pattern: a field with the action inside it. */
.field { margin: 40px auto 0; width: min(480px, 100%); position: relative; cursor: text; }
.field input {
  width: 100%; height: 56px; border: var(--hair) solid var(--line); border-radius: 12px;
  background: #fff; font-size: 18px; padding: 0 128px 0 18px; outline: none;
  transition: border-color var(--fast) ease-out;
}
.field input::placeholder { color: #A9ADB2; }
.field input:focus { border-color: var(--text); }
.field button {
  position: absolute; right: 8px; top: 8px; height: 40px; min-width: 112px; padding: 0 16px;
  border-radius: 8px; background: var(--text); color: #fff; font-size: 15px; font-weight: 500;
  box-shadow: inset 0 -3px 3px rgba(255,255,255,.22);
  transition: transform var(--fast) ease-out, opacity var(--fast) ease-out;
}
.field button:hover { transform: scale(1.02); }
.field button:active { transform: scale(.97); }
.field button:disabled { opacity: .4; transform: none; }

/* A real call to action: solid, bold, obviously pressable. Never a text link
   pretending to be a button. */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: 10px;
  background: var(--text); color: #fff; font-size: 15px; font-weight: 500;
  letter-spacing: -0.005em; white-space: nowrap;
  box-shadow: inset 0 -3px 3px rgba(255,255,255,.22), 0 1px 2px rgba(17,20,24,.16);
  transition: transform var(--fast) ease-out, box-shadow var(--fast) ease-out;
}
.cta:hover { transform: translateY(-1px); box-shadow: inset 0 -3px 3px rgba(255,255,255,.22), 0 4px 12px -2px rgba(17,20,24,.28); }
.cta:active { transform: translateY(0) scale(.98); }
.cta.big { height: 56px; padding: 0 28px; font-size: 16.5px; border-radius: 12px; width: 100%; }
.cta.ghost {
  background: #fff; color: var(--text); box-shadow: none;
  border: var(--hair) solid var(--line);
}
.cta.ghost:hover { border-color: var(--text); box-shadow: none; }