/* KwotTalk · temporary page for kwottalk.d4u.store (until the www is published). Colors come only
   from css/tokens.css, generated from the app's tokens.json (--kt-<token>, light and dark); this
   file names them for the page and writes no color of its own. Archivo 800 for the wordmark, the
   system font for text. Light and dark follow js/theme.js (key "d4u-theme"). */

/* Font sizes shared by every D4U page, copied as is from the D4U Store shell
   (Websites/d4u-store/site/apps/shell/css/shell.css, the guidelines' «Font sizes» section).
   KwotTalk keeps its own typefaces, weights and colors; the sizes are common. */
:root {
  --sh-fs-display: clamp(40px, 5.6vw, 72px);  /* hero title (h1) */
  --sh-fs-h2: clamp(30px, 3.6vw, 44px);       /* section titles */
  --sh-fs-h3: clamp(20px, 1.8vw, 22px);       /* card and block titles */
  --sh-fs-lead: clamp(18px, 1.6vw, 20px);     /* the line under a title */
  --sh-fs-body: 17px;                         /* paragraphs */
  --sh-fs-button: 16px;                       /* every button; buttons are at least 48 px tall */
  --sh-fs-small: 14px;                        /* captions, notes, platforms */
  --sh-fs-label: 13px;                        /* eyebrows, tags, status */
}

@font-face { font-family: "Archivo"; src: url("../fonts/archivo-800-latin.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrainsmono-700-d4u.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* Page color ← app token. Dark mode comes with the tokens. */
:root {
  --bg: var(--kt-background); --ink: var(--kt-text-primary); --muted: var(--kt-text-secondary);
  --line: var(--kt-separator); --word: var(--kt-text-primary); --bracket: var(--kt-signature-bracket);
  --accent: var(--kt-accent);
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font: 400 var(--sh-fs-body)/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; padding: 8px 12px; border-radius: 10px; background: var(--ink); color: var(--bg); }
.skip:focus { left: 16px; }

.top { display: flex; justify-content: flex-end; padding: 16px; }
.tools { display: flex; gap: 8px; }
.lang { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--sh-fs-small); font-weight: 600; text-decoration: none; }
.theme { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.theme svg { width: 18px; height: 18px; display: block; }
.lang:hover, .theme:hover { border-color: var(--accent); }
.theme .i-sun { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme .i-sun { display: block; } :root:not([data-theme="light"]) .theme .i-moon { display: none; } }
:root[data-theme="dark"] .theme .i-sun { display: block; }
:root[data-theme="dark"] .theme .i-moon { display: none; }

.hold { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 16px 48px; text-align: center; }
.icon { width: 96px; height: 96px; border-radius: 22px; }
.word { margin: 6px 0 0; font: 800 var(--sh-fs-display)/1 "Archivo", system-ui, sans-serif; letter-spacing: -.02em; color: var(--word); }
.word span { color: var(--accent); }
.line { margin: 0; max-width: 30em; font-size: var(--sh-fs-lead); color: var(--muted); text-wrap: balance; }
.status { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; margin: 10px 0 0; font-size: var(--sh-fs-small); color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--line); font-weight: 700; font-size: var(--sh-fs-label); color: var(--ink); }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.stores { margin: 0; font-size: var(--sh-fs-small); color: var(--muted); }

.foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; padding: 20px 16px 28px; border-top: 1px solid var(--line); font-size: var(--sh-fs-small); color: var(--muted); }
.foot p { margin: 0; }
.powered a { font: 700 var(--sh-fs-small)/1 "JetBrains Mono", ui-monospace, Menlo, monospace; color: var(--ink); text-decoration: none; letter-spacing: -.02em; }
.powered b { color: var(--bracket); font-weight: 700; }

/* kwottalk.d4u.dev: the pages around the contact card (qr/tools/build_pages.py). */
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 14px; font-size: var(--sh-fs-button); font-weight: 600; text-decoration: none; background: var(--accent); color: var(--kt-on-accent); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.title { margin: 6px 0 0; font: 800 var(--sh-fs-h2)/1.1 "Archivo", system-ui, sans-serif; letter-spacing: -.015em; color: var(--word); text-wrap: balance; }
.points { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 860px; margin: 26px 0 0; padding: 0; }
.points li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--kt-surface); }
.points svg { width: 26px; height: 26px; fill: currentColor; }
.points .ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--kt-flag-bg); color: var(--kt-flag-text); }
.points h2 { margin: 4px 0 0; font: 800 var(--sh-fs-h3)/1.2 "Archivo", system-ui, sans-serif; }
.points p { margin: 0; font-size: var(--sh-fs-small); color: var(--muted); }
.other-lang { margin: 18px 0 0; font-size: var(--sh-fs-small); color: var(--muted); }
@media (max-width: 720px) { .points { grid-template-columns: 1fr; max-width: 420px; } }