/* Aliveness design tokens and base components.
   One world for the landing page and the web app: night ink, lantern light, the threads as the only ornament.
   Copied unchanged from the relaunch design (aliveness-weave design/tokens.css). Rules: docs/design-system.md.

   Fonts (Google Fonts):
   https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;1,6..96,400&family=Hanken+Grotesk:wght@400;500;600&family=IBM+Plex+Mono:wght@400&display=swap
*/

:root {
  /* colour: one dark theme, no light mode */
  --ink: #0a0f1c;          /* page */
  --deep: #060a14;         /* full-screen practice rooms: Feel, Move, Listen */
  --surface: #0e1526;      /* alternate section band */
  --raised: #131b30;       /* the occasional card */
  --line: #232d45;         /* hairlines between sections */
  --line-strong: #3a4666;  /* card borders, the practice ring */
  --fg: #ece6da;           /* headings and primary text: warm ivory */
  --body: #c9cedb;         /* body copy */
  --muted: #a3abbd;        /* small print, captions, labels */
  --accent: #e8c27a;       /* lantern gold: primary action, one emphasised word, the lit beat */
  --accent-ink: #1d1608;   /* text on the accent */
  /* accent alternatives, pick one and never mix: #f0d9a8, #e6a98c, #a9d6c8 */

  /* type */
  --display: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --text: 18px;            /* 16px on phone */
  --leading: 1.55;

  /* shape and space */
  --radius-card: 4px;
  --radius-pill: 999px;
  --tap: 44px;             /* minimum touch target */
  --page-max: 1200px;      /* desktop pages */
  --flow-max: 480px;       /* the practice flow */
  --gutter: 24px;          /* 16px on phone */
  --section: 104px;        /* vertical rhythm between sections */

  /* motion: breath-paced, every animation has a still state */
  --breath-in: 4s;         /* never more than 7 breaths a minute */
  --breath-out: 6s;
  --orbit: 12s;            /* the dot on the practice ring */

  color-scheme: dark;
}

@media (max-width: 600px) {
  :root { --text: 16px; --gutter: 16px; --section: 72px; }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { background: var(--ink); color: var(--fg); }
body { margin: 0; font-family: var(--sans); font-size: var(--text); line-height: var(--leading); }

/* headings: display serif, italic for one emphasised phrase at most */
.display { font-family: var(--display); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
.display em { font-style: italic; }
.display em.lit { color: var(--accent); }

/* labels: rare, at most one per screen */
.label { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0; }

/* buttons: pills */
.btn {
  font: inherit; font-weight: 600; font-size: 16px; min-height: var(--tap); padding: 0 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: transparent; color: var(--fg); cursor: pointer;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.quiet { border: none; font-weight: 500; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* the one sound control: a 44px round speaker icon on the image's top-left corner */
.icon-btn {
  width: var(--tap); height: var(--tap); padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); border: 1px solid var(--line); background: rgba(18, 26, 43, 0.6); color: var(--fg); cursor: pointer;
}

/* cards and inputs */
.card { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 28px 30px; }
.field input { font: inherit; color: var(--fg); background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 12px 14px; width: 100%; }
.line-input { font-family: var(--display); font-style: italic; font-size: 22px; }

/* a person's own words: quoted, italic display, attributed */
.own-words { font-family: var(--display); font-style: italic; font-size: clamp(22px, 5vw, 30px); line-height: 1.3; margin: 0; text-wrap: balance; }

/* a piece floats on the night: soft radial edges, screen blend, never in a box */
.piece { mix-blend-mode: screen; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 46%, transparent 71%); mask-image: radial-gradient(circle at 50% 50%, #000 46%, transparent 71%); }

/* full-screen practice room */
.room { position: fixed; inset: 0; background: var(--deep); overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}