/* Warm Paper components. Uses variables from tokens.css. One class per component.
   Type classes (.display, .heading-1 … .eyebrow) get size, weight, line height and tracking
   from tokens.css; this file adds only color and behavior. */

:root { --bubble-own: color-mix(in oklab, var(--primary) 12%, var(--background)); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}
:where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
/* Deliberate fix: source --ring is ~2.3:1 on white, so the keyboard ring uses foreground (high contrast). */
:focus-visible { outline: 2px solid var(--foreground); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Marketing surface: warm paper ground, near-black ink */
.surface-paper { background: var(--marketing-paper); color: var(--marketing-ink); }
.surface-paper { --muted-foreground: var(--marketing-muted); }

/* ---------- Type ---------- */
.display, .heading-1 { text-wrap: balance; }
.lead, .body, .small, .eyebrow { color: var(--muted-foreground); }
.eyebrow { text-transform: uppercase; }
.mono, code, kbd { font-family: var(--font-mono); }
code { font-size: 0.875em; background: var(--muted); border-radius: var(--radius-xs); padding: 0.1em 0.35em; }
pre {
  margin: 0; padding: var(--space-4); overflow-x: auto;
  background: var(--secondary); color: var(--foreground);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-lg);
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-relaxed);
}
pre code { background: none; padding: 0; }
kbd {
  display: inline-block; min-width: 1.5em; padding: 0.1em 0.45em; text-align: center;
  font-size: var(--text-xs); border: var(--border-width) solid var(--border); border-bottom-width: 2px;
  border-radius: var(--radius-xs); background: var(--card);
}
.link { color: inherit; font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: text-decoration-color var(--duration-base) var(--ease-out); }
.link:hover { text-decoration-thickness: 2px; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--marketing-ink); --btn-fg: var(--marketing-paper); --btn-border: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6); border: var(--border-width-bold) solid var(--btn-border);
  border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--btn-fg);
  font: var(--weight-semibold) var(--text-sm)/1.5 var(--font-sans); text-decoration: none; cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.btn:active { transform: scale(0.97); box-shadow: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--marketing-ink); --btn-border: var(--marketing-outline); }
.btn--paper { --btn-bg: var(--marketing-paper); --btn-fg: var(--marketing-ink); --btn-border: var(--marketing-outline); }
.btn--ghost { --btn-bg: transparent; --btn-fg: inherit; box-shadow: none; }
.btn--ghost:hover { background: var(--accent); box-shadow: none; transform: none; }
.btn--sm { padding: var(--space-1) var(--space-4); font-size: var(--text-sm); }
.btn--md { padding: var(--space-2) var(--space-5); }
.btn--moment { --btn-bg: var(--moment-blue-ink); --btn-fg: var(--moment-blue-on-ink); }
/* App button: small radius, used inside the product */
.btn-app {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 10px;
  border: 0; border-radius: var(--radius-md); background: var(--primary); color: var(--primary-foreground);
  font: var(--weight-medium) var(--text-sm)/1.5 var(--font-sans); cursor: pointer; text-decoration: none;
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.btn-app:hover { opacity: 0.9; }
.btn-app:active { transform: scale(0.98); }
.btn-app--secondary { background: var(--secondary); color: var(--secondary-foreground); }
.btn-app--outline { background: var(--background); color: var(--foreground); border: var(--border-width) solid var(--border); }
.btn-app--destructive { background: var(--destructive); color: var(--destructive-foreground); }
/* Source pair measures 2.79:1 in dark; this deliberate fix uses the dark ground for text instead. */
[data-theme="dark"] .btn-app--destructive { color: var(--background); }
.btn-app--ghost { background: transparent; color: var(--muted-foreground); }
.btn-app--ghost:hover { background: var(--accent); color: var(--accent-foreground); opacity: 1; }
.btn-app[disabled] { opacity: 0.5; pointer-events: none; }
.btn-icon { width: 2.25rem; height: 2.25rem; padding: 0; justify-content: center; border-radius: var(--radius-pill); border: var(--border-width-bold) solid var(--marketing-outline); background: #fff; color: #000; cursor: pointer; display: inline-flex; align-items: center; transition: transform var(--duration-fast) var(--ease-out); }
.btn-icon:hover { transform: scale(1.06); }

/* ---------- Nav ---------- */
.nav-flat { display: flex; align-items: center; gap: var(--space-1); height: var(--nav-height); padding: 0 var(--space-6); background: var(--background); border-bottom: var(--border-width) solid transparent; }
.nav-flat .nav__links { margin-left: var(--space-2); }
@media (max-width: 640px) { .nav-flat { padding: 0 var(--space-3); } .nav-flat .nav__link:not([aria-current]) { display: none; } }
.nav-pill {
  position: sticky; top: var(--space-4); z-index: 20; width: max-content; max-width: calc(100% - 2rem); margin: var(--space-4) auto 0;
  display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1);
  background: var(--marketing-paper); border: var(--border-width-bold) solid var(--marketing-outline); border-radius: var(--radius-pill);
}
.nav__links { display: flex; align-items: center; gap: var(--space-1); }
.nav__link {
  padding: 6px 12px; border-radius: var(--radius-pill); color: color-mix(in srgb, var(--marketing-ink) 75%, transparent);
  font-size: var(--text-sm); text-decoration: none; white-space: nowrap;
  transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.nav__link:hover { background: color-mix(in srgb, var(--marketing-ink) 8%, transparent); color: var(--marketing-ink); }
.nav__link[aria-current="page"] { color: var(--marketing-ink); font-weight: var(--weight-semibold); }
.nav__brand { padding: 6px 12px; font-weight: var(--weight-semibold); letter-spacing: -0.025em; text-decoration: none; color: var(--marketing-ink); }
.nav__cta { margin-left: var(--space-1); padding: 6px 16px; border-radius: var(--radius-pill); background: var(--marketing-ink); color: var(--marketing-paper); font-weight: var(--weight-semibold); text-decoration: none; transition: transform var(--duration-fast) var(--ease-out); }
.nav__cta:hover { transform: scale(1.03); }
.nav__spacer { flex: 1; }
/* Mobile bottom capsule */
.nav-capsule { display: none; }
@media (max-width: 640px) {
  .nav-pill .nav__links { display: none; }
  .nav-pill { width: calc(100% - 2rem); justify-content: space-between; }
  .nav-capsule {
    position: fixed; left: 50%; bottom: max(env(safe-area-inset-bottom), 0.75rem); transform: translateX(-50%); z-index: 30;
    display: flex; gap: var(--space-1); padding: var(--space-1); background: var(--marketing-paper);
    border: var(--border-width-bold) solid var(--marketing-outline); border-radius: var(--radius-pill); box-shadow: var(--shadow-float);
  }
}

/* ---------- Panels and cards ---------- */
/* Panels are always white: muted text inside uses the marketing muted ink in both themes. */
.panel {
  --muted-foreground: var(--marketing-muted);
  background: #fff; color: var(--marketing-ink); border: var(--border-width-bold) solid var(--marketing-outline);
  border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); padding: var(--space-10) var(--space-8);
  width: min(100%, 38rem); text-align: center;
}
.panel--flat { box-shadow: none; border-width: var(--border-width-heavy); border-radius: var(--radius-card); text-align: left; padding: var(--space-9); }
.card {
  display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5);
  background: var(--card); color: var(--card-foreground); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg);
  text-decoration: none; transition: border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
a.card:hover { border-color: var(--ring); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.card__icon { width: 1rem; height: 1rem; margin-bottom: var(--space-3); color: var(--muted-foreground); }
.card__title { font-weight: var(--weight-semibold); font-size: var(--text-sm); letter-spacing: -0.01em; }
.card__text { font-size: var(--text-xs); line-height: var(--leading-relaxed); color: var(--muted-foreground); }
.moment {
  --moment-bg: var(--moment-blue); --moment-fg: var(--moment-blue-ink);
  display: flex; align-items: center; gap: var(--space-8); padding: var(--space-9);
  background: var(--moment-bg); color: var(--moment-fg); border-radius: var(--radius-card);
}
.moment--yellow { --moment-bg: var(--moment-yellow); --moment-fg: var(--moment-yellow-ink); }
.moment--pink { --moment-bg: var(--moment-pink); --moment-fg: var(--moment-pink-ink); }
.moment--coral { --moment-bg: var(--moment-coral); --moment-fg: var(--moment-coral-ink); }
.moment--hero { justify-content: center; min-height: 12rem; }
.moment .btn { --btn-bg: var(--moment-fg); --btn-fg: var(--moment-bg); }
.moment__art { width: 7.5rem; aspect-ratio: 1; flex: none; display: grid; place-items: center; border: var(--border-width-bold) dashed currentColor; border-radius: var(--radius-lg); font-size: var(--text-2xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; opacity: 0.9; }
@media (max-width: 640px) { .moment { flex-direction: column; align-items: flex-start; padding: var(--space-6); gap: var(--space-4); } }

/* ---------- Form ---------- */
.field { display: grid; gap: var(--space-2); }
.label { font-size: var(--text-xs); font-weight: var(--weight-medium); }
.input {
  width: 100%; padding: var(--space-3) var(--space-3); background: var(--background); color: var(--foreground);
  border: var(--border-width) solid var(--input); border-radius: var(--radius-md); font: var(--text-sm)/1.5 var(--font-sans);
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.input::placeholder { color: var(--muted-foreground); opacity: 0.7; }
.input:hover { border-color: var(--ring); }
.input:focus-visible { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 35%, transparent); }
.input[aria-invalid="true"] { border-color: var(--destructive); }
.input[disabled] { opacity: 0.5; }
.field__error { font-size: var(--text-xs); color: var(--destructive); }
.btn-social {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: var(--space-2); padding: 9px var(--space-4);
  background: var(--secondary); color: var(--foreground); border: var(--border-width) solid var(--border); border-radius: var(--radius-md);
  font: var(--weight-medium) var(--text-xs)/1.5 var(--font-sans); cursor: pointer; text-decoration: none;
  transition: background-color var(--duration-base) var(--ease-out);
}
.btn-social:hover { background: var(--accent); }
.divider { display: flex; align-items: center; gap: var(--space-3); color: var(--muted-foreground); font-size: var(--text-xs); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ---------- Tags, badges, state ---------- */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--secondary); color: var(--secondary-foreground); font-size: var(--text-2xs); font-weight: var(--weight-medium); }
.dot { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-pill); background: var(--dot, var(--muted-foreground)); display: inline-block; flex: none; }
.dot--human { --dot: var(--state-human); } .dot--agent { --dot: var(--state-agent); } .dot--working { --dot: var(--state-working); }
.dot--offline { --dot: var(--state-offline); }
.dot--working { animation: pulse 2s var(--ease-in-out) infinite; }
@keyframes pulse { 50% { opacity: 0.4; } }
/* State chips: text stays foreground (some state colors fail contrast as text); the dot carries the color. */
.pr { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--radius-pill); font-size: var(--text-2xs); font-weight: var(--weight-semibold); color: var(--foreground); background: color-mix(in srgb, var(--pr) 16%, transparent); }
.pr::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-pill); background: var(--pr); }
.pr--open { --pr: var(--state-open); } .pr--merged { --pr: var(--state-merged); } .pr--closed { --pr: var(--state-closed); }
.pr--approved { --pr: var(--state-approve); } .pr--rejected { --pr: var(--state-reject); }

/* ---------- Chat (product) ---------- */
.message { display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.message__avatar { width: 2rem; height: 2rem; border-radius: var(--radius-pill); background: var(--secondary); display: grid; place-items: center; font-size: var(--text-xs); font-weight: var(--weight-semibold); position: relative; }
.message__avatar[data-kind="agent"] { border-radius: var(--radius-md); }
.message__meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--muted-foreground); }
.message__name { font-weight: var(--weight-semibold); color: var(--foreground); font-size: var(--text-sm); }
.message__body { margin-top: 2px; font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.message--agent { background: var(--bg-agent-msg); border-radius: var(--radius-lg); }
.bubble-own { background: var(--bubble-own); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); display: inline-block; }

/* ---------- Docs / reading ---------- */
.docs-layout { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); gap: var(--space-12); max-width: var(--container-page); margin: 0 auto; padding: var(--space-6); }
.sidenav { display: grid; align-content: start; gap: 2px; padding-top: var(--space-6); font-size: var(--text-xs); }
.sidenav a { padding: 6px 12px; border-radius: var(--radius-md); color: var(--muted-foreground); text-decoration: none; transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); }
.sidenav a:hover { background: var(--sidebar-accent); color: var(--foreground); }
.sidenav a[aria-current="page"] { background: var(--sidebar-accent); color: var(--foreground); font-weight: var(--weight-medium); }
.prose { max-width: var(--container-reading); font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--muted-foreground); }
.prose > * + * { margin-top: var(--space-4); }
.prose :where(h2) { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-2xl); letter-spacing: -0.025em; line-height: 1.2; color: var(--foreground); margin-top: var(--space-8); }
.prose :where(h3) { font-weight: var(--weight-semibold); font-size: var(--text-lg); color: var(--foreground); margin-top: var(--space-6); }
.prose :where(ul, ol) { padding-left: var(--space-6); }
.prose :where(li + li) { margin-top: var(--space-2); }
.prose :where(strong) { color: var(--foreground); font-weight: var(--weight-semibold); }
.prose :where(a) { color: var(--foreground); }
.prose :where(blockquote) { padding: var(--space-3) var(--space-5); background: var(--secondary); border-radius: var(--radius-lg); font-style: italic; }
.prose :where(hr) { border: 0; border-top: 1px solid var(--border); }
@media (max-width: 820px) { .docs-layout { grid-template-columns: 1fr; gap: var(--space-4); } .sidenav { display: flex; flex-wrap: wrap; padding-top: 0; } }

/* Changelog entry */
.entry { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--space-8); padding: var(--space-10) 0; border-top: 1px solid var(--border); }
.entry__date { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--muted-foreground); align-self: start; padding-top: var(--space-2); }
.entry__date::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-pill); background: var(--foreground); }
@media (max-width: 720px) { .entry { grid-template-columns: 1fr; gap: var(--space-3); } }

/* Blog row */
.post { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-6); padding: var(--space-6) 0; border-bottom: 1px solid var(--border); text-decoration: none; }
.post__thumb { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: var(--moment-bg, var(--moment-yellow)); transition: transform var(--duration-slow) var(--ease-out); }
.post:hover .post__thumb { transform: scale(1.02); }
.post__meta { display: flex; gap: var(--space-2); font-size: var(--text-xs); color: var(--muted-foreground); }
.post__title { margin-top: var(--space-2); font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-2xl); line-height: 1.2; letter-spacing: -0.025em; text-wrap: balance; }
.post__excerpt { margin-top: var(--space-2); font-size: var(--text-xs); line-height: var(--leading-relaxed); color: var(--muted-foreground); }
.post__author { margin-top: var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-medium); }
@media (max-width: 640px) { .post { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.footer { background: var(--marketing-ink); color: var(--marketing-paper); padding: var(--space-12) var(--space-6) var(--space-6); }
.footer__inner { max-width: var(--container-page); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-8); }
.footer__lead { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 1.375rem; max-width: 20rem; line-height: 1.2; }
.footer__links { list-style: none; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-xs); }
.footer__links a { text-decoration: none; opacity: 0.8; transition: opacity var(--duration-base) var(--ease-out); }
.footer__links a:hover { opacity: 1; }
.footer__legal { max-width: var(--container-page); margin: var(--space-10) auto 0; font-size: var(--text-xs); opacity: 0.6; }

/* ---------- Overlay (launch film frame) ---------- */
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; padding: var(--space-4); background: color-mix(in srgb, #000 55%, transparent); backdrop-filter: blur(var(--blur-sm)); }
.modal-backdrop[data-open="true"] { display: grid; animation: fade-in var(--duration-slow) var(--ease-out); }
.modal { width: min(100%, 56rem); background: #000; border-radius: 2.25rem; overflow: hidden; box-shadow: 0 24px 80px 0 rgba(20, 21, 16, 0.16); animation: pop var(--duration-page) var(--ease-out); position: relative; }
.modal__stage { aspect-ratio: 16 / 9; display: grid; place-items: center; color: #fff; font-size: var(--text-sm); }
.modal__close { position: absolute; top: var(--space-3); right: var(--space-3); }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(0.96) translateY(8px); } }

/* ---------- Pattern slot (placeholder for the illustration crowd) ---------- */
.pattern {
  background-color: var(--marketing-paper);
  background-image: radial-gradient(circle at 25% 25%, var(--marketing-ink) 0 2px, transparent 2.5px), radial-gradient(circle at 75% 75%, var(--marketing-ink) 0 2px, transparent 2.5px);
  background-size: 28px 28px;
}
.stage { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6); }

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}