/* SkeletonKey — design tokens and page styles. See DESIGN.md for the system. */

:root {
  /* type scale (Tailwind steps: size / line-height) */
  --t-xs: 0.75rem;      --lh-xs: 1rem;
  --t-sm: 0.875rem;     --lh-sm: 1.25rem;
  --t-base: 1rem;       --lh-base: 1.5rem;
  --t-lg: 1.125rem;     --lh-lg: 1.75rem;
  --t-xl: 1.25rem;      --lh-xl: 1.75rem;
  --t-2xl: 1.5rem;      --lh-2xl: 2rem;
  --t-3xl: 1.875rem;    --lh-3xl: 2.25rem;
  --t-4xl: 2.25rem;     --lh-4xl: 2.5rem;
  --t-5xl: 3rem;        --lh-5xl: 1;

  /* spacing scale */
  --s-25: 2px;  --s-50: 4px;  --s-75: 8px;  --s-100: 12px; --s-200: 16px;
  --s-300: 24px; --s-400: 32px; --s-500: 40px; --s-600: 48px; --s-700: 64px;
  --s-800: 80px; --s-900: 96px;

  /* radius (Tailwind steps) */
  --r-sm: 2px; --r-base: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-2xl: 16px; --r-full: 9999px;

  /* motion */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 160ms;
  --dur-ui: 200ms;
  --dur-reveal: 800ms;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --measure: 680px;
  --page: 960px;

  /* dark is the default theme */
  --bg: #0B0B0C;
  --surface: #131209;
  --border: #2A2927;
  --border-strong: #3A3835;
  --text: #F2F0ED;
  --muted: #A8A49D;
  --meta: #948F88;
  --accent: #E8B04B;
  --accent-ink: #0B0B0C;
  --accent-wash: rgba(232, 176, 75, 0.10);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #FAF9F7;
    --surface: #F2F0EC;
    --border: #E2DFD9;
    --border-strong: #D2CEC6;
    --text: #17161A;
    --muted: #5C5853;
    --meta: #5C5853;
    --accent: #8A5A0F;
    --accent-ink: #FFFFFF;
    --accent-wash: rgba(138, 90, 15, 0.08);
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  text-wrap: pretty;
}

h1, h2, h3, p, ol, ul { margin: 0; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
ol, ul { padding: 0; list-style: none; }

a { color: var(--text); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.skip {
  position: absolute;
  left: var(--s-200);
  top: calc(-1 * var(--s-600));
  z-index: 2;
  padding: var(--s-75) var(--s-100);
  border-radius: var(--r-lg);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur-ui) var(--ease);
}
.skip:focus { top: var(--s-200); }

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--s-300);
}

/* ---------- header ---------- */

.site-head {
  border-bottom: 1px solid var(--border);
}
.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-200);
  min-height: 64px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  text-decoration: none;
}
.wordmark svg { display: block; height: 24px; width: auto; }
.wordmark .glyph { stroke: var(--accent); }

.head-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-75);
  padding: var(--s-75) var(--s-100);
  border-radius: var(--r-lg);
  color: var(--muted);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.head-link:hover { color: var(--text); background: var(--accent-wash); }
.head-link:active { transform: translateY(1px); }

/* ---------- hero ---------- */

main { display: block; }

section { padding: var(--s-700) 0; }
.hero { padding: var(--s-800) 0 var(--s-700); }

.hero h1 {
  max-width: var(--measure);
  font-size: var(--t-3xl);
  line-height: var(--lh-3xl);
  letter-spacing: -0.02em;
}
.hero .sub {
  max-width: var(--measure);
  margin-top: var(--s-300);
  color: var(--muted);
  font-size: var(--t-lg);
  line-height: var(--lh-lg);
}
.hero .snippet-label {
  margin-top: var(--s-600);
  margin-bottom: var(--s-100);
  color: var(--meta);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero .req {
  margin-top: var(--s-100);
  color: var(--meta);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
}
.hero .req code { font-family: var(--font-mono); color: var(--muted); }

/* ---------- code block ---------- */

.code {
  position: relative;
  max-width: var(--measure);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  padding: var(--s-200);
}
.code pre {
  margin: 0;
  padding-right: 88px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
  color: var(--text);
  scrollbar-width: thin;
}
.code pre .prompt { color: var(--accent); user-select: none; }
.code pre .hint { color: var(--meta); }

/* inner radius = outer 12 − gap 8 = 4 (B3) */
.copy {
  position: absolute;
  top: var(--s-75);
  right: var(--s-75);
  padding: var(--s-50) var(--s-75);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-base);
  background: var(--bg);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.copy:hover { color: var(--text); border-color: var(--accent); }
.copy:active { transform: scale(0.98); }
.copy[data-state="done"] { color: var(--accent); border-color: var(--accent); }

/* ---------- steps ---------- */

.steps {
  display: grid;
  gap: var(--s-400);
  grid-template-columns: 1fr;
}
.step .num {
  display: block;
  margin-bottom: var(--s-100);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
}
.step h3 {
  font-size: var(--t-xl);
  line-height: var(--lh-xl);
  letter-spacing: -0.01em;
}
.step p {
  margin-top: var(--s-75);
  color: var(--muted);
  font-size: var(--t-base);
  line-height: var(--lh-base);
}
.step code {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--text);
}

.eyebrow {
  margin-bottom: var(--s-300);
  color: var(--meta);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
}

/* ---------- tagline ---------- */

.tagline { padding: var(--s-800) 0; }
.tagline p {
  max-width: var(--measure);
  font-size: var(--t-2xl);
  line-height: var(--lh-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.tagline .lede { color: var(--text); }

/* ---------- two paths ---------- */

.paths {
  display: grid;
  gap: var(--s-300);
  grid-template-columns: 1fr;
}
.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-200);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  background: var(--surface);
  padding: var(--s-300);
}
.card h3 {
  font-size: var(--t-xl);
  line-height: var(--lh-xl);
  letter-spacing: -0.01em;
}
.card .tag {
  display: inline-block;
  margin-bottom: var(--s-75);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.card p {
  color: var(--muted);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
}
.card .spacer { flex: 1 1 auto; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-75);
  padding: var(--s-75) var(--s-100);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn-primary:active { transform: scale(0.98); }
.btn-secondary {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-secondary:hover { border-color: var(--accent); background: var(--accent-wash); }
.btn-secondary:active { transform: scale(0.98); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ---------- form ---------- */

.form { display: flex; flex-direction: column; gap: var(--s-75); }
.form label {
  color: var(--text);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
}
.row { display: flex; flex-wrap: wrap; gap: var(--s-75); }
input[type="email"] {
  flex: 1 1 180px;
  min-width: 0;
  padding: var(--s-75) var(--s-100);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  line-height: var(--lh-base);
  transition: border-color var(--dur-fast) var(--ease);
}
input[type="email"]::placeholder { color: var(--meta); }
input[type="email"]:hover { border-color: var(--accent); }
input[type="email"][aria-invalid="true"] { border-color: var(--accent); }
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.note { color: var(--meta); font-size: var(--t-xs); line-height: var(--lh-xs); }
.msg {
  min-height: var(--lh-sm);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
  color: var(--muted);
}
.msg[data-state="ok"] { color: var(--accent); }
.msg[data-state="error"] { color: var(--text); }

/* ---------- utility ---------- */

.cta-row { margin-top: var(--s-400); }

/* ---------- footer ---------- */

.site-foot {
  border-top: 1px solid var(--border);
  padding: var(--s-400) 0;
}
.site-foot .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-100) var(--s-300);
  color: var(--meta);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
}
.site-foot a { color: var(--muted); text-decoration-color: var(--border-strong); }
.site-foot a:hover { color: var(--text); }
.site-foot .ver { font-family: var(--font-mono); }

/* ---------- reveals ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(3px);
    transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease),
                filter var(--dur-reveal) var(--ease);
  }
  .js .reveal.in { opacity: 1; transform: none; filter: none; }
  .js .tagline .w { color: var(--border-strong); transition: color 600ms var(--ease); }
  .js .tagline.in .w { color: inherit; }
}

/* ---------- breakpoints ---------- */

/* Narrow screens: the copy button sits under the code instead of over it. */
@media (max-width: 479px) {
  .code pre { padding-right: 0; }
  .copy {
    position: static;
    display: block;
    margin: var(--s-100) 0 0 auto;
  }
}

@media (min-width: 480px) {
  .hero h1 { font-size: var(--t-4xl); line-height: var(--lh-4xl); }
  .tagline p { font-size: var(--t-3xl); line-height: var(--lh-3xl); }
}

@media (min-width: 768px) {
  .wrap { padding: 0 var(--s-400); }
  .hero { padding: var(--s-900) 0 var(--s-800); }
  .hero h1 { font-size: var(--t-5xl); line-height: var(--lh-5xl); }
  .hero .sub { font-size: var(--t-xl); line-height: var(--lh-xl); }
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-400); }
  .paths { grid-template-columns: repeat(2, 1fr); }
  .tagline p { font-size: var(--t-4xl); line-height: var(--lh-4xl); }
  .tagline { padding: var(--s-900) 0; }
}