/* ChatAloud: tokens and base elements, shared by the marketing pages and the app. Source of truth: claude/brand/guide.html */
@font-face { font-family: "Young Serif"; src: url("/fonts/young-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/atkinson-hyperlegible-next-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/atkinson-hyperlegible-next-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/atkinson-hyperlegible-next-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --ink: #14212B; --evergreen: #0F5C55; --spotlight: #FFC53D; --mist: #E3F0EC; --chalk: #F7F9F8; --coral: #FF7B6B; --white: #FFFFFF;
  --bg: var(--chalk); --surface: var(--white); --surface-2: var(--mist); --text: var(--ink); --text-soft: #4A5A63; --line: #D3DFDB;
  --brand: var(--evergreen); --brand-ink: var(--white); --warn: #B4402E; --good: #1F7A4E;
  --shadow: rgba(20, 33, 43, .10); --ray-base: rgba(15, 92, 85, .15);
  --font-display: "Young Serif", Georgia, "Times New Roman", serif;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 18px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1A20; --surface: #16262D; --surface-2: #1D3038; --text: #E9F1EE; --text-soft: #A9BBB6; --line: #2B3E44;
    --brand: #5FC2B2; --brand-ink: #0E1A20; --warn: #FF9C8C; --good: #6FD39F; --shadow: rgba(0, 0, 0, .45); --ray-base: rgba(95, 194, 178, .18);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1A20; --surface: #16262D; --surface-2: #1D3038; --text: #E9F1EE; --text-soft: #A9BBB6; --line: #2B3E44;
  --brand: #5FC2B2; --brand-ink: #0E1A20; --warn: #FF9C8C; --good: #6FD39F; --shadow: rgba(0, 0, 0, .45); --ray-base: rgba(95, 194, 178, .18);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.12; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 6.5vw, 3.9rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0; }
a { color: var(--brand); }
.wrap { max-width: 1040px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.stack { display: grid; gap: 14px; }
.stack-lg { display: grid; gap: 28px; }
.muted { color: var(--text-soft); }
.small { font-size: .9rem; }
.center { text-align: center; }
.eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); }
.lead { font-size: 1.15rem; max-width: 60ch; }
.card { background: var(--surface); border-radius: var(--radius); padding: 22px; box-shadow: 0 1px 2px var(--shadow), 0 14px 34px -24px var(--shadow); min-width: 0; display: grid; gap: 10px; align-content: start; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 22px; border-radius: 14px; border: 2px solid var(--brand); background: var(--brand); color: var(--brand-ink); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; text-align: center; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-quiet { background: transparent; color: var(--brand); }
.btn-spot { background: var(--spotlight); border-color: var(--spotlight); color: var(--ink); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; }
.btn-small { min-height: 40px; padding: 6px 14px; border-radius: 11px; font-size: .95rem; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--spotlight); outline-offset: 2px; }
.lockup { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.lockup svg { width: 34px; height: 34px; flex: none; }
.wordmark { font-family: var(--font-display); font-size: 1.55rem; line-height: 1; letter-spacing: -.01em; }
.note { background: var(--surface-2); border-left: 4px solid var(--spotlight); border-radius: 0 12px 12px 0; padding: 12px 16px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }