/* Therapiya — design tokens
   Warm wellness palette: cream paper + forest-ink + terracotta accent.
   Designed to feel human and serious — not corporate-medical.
*/
:root {
  /* surfaces */
  --th-cream: #F4EEE3;
  --th-paper: #FBF7EE;
  --th-paper-2: #F8F2E6;
  --th-ink: #1E2A24;            /* deep forest ink (almost black) */
  --th-ink-2: #2D3A33;
  --th-line: rgba(30, 42, 36, 0.10);
  --th-line-2: rgba(30, 42, 36, 0.18);

  /* sage – calm */
  --th-sage-50:  #ECEDE2;
  --th-sage-100: #DDE0CF;
  --th-sage-200: #BFC6B0;
  --th-sage-400: #8B9982;
  --th-sage-600: #5C6C58;
  --th-sage-800: #2E3A2C;

  /* terracotta – warmth + CTA */
  --th-clay-50:  #F6E4D7;
  --th-clay-200: #E9BFA2;
  --th-clay-500: #C97B5F;
  --th-clay-700: #A55A3F;

  /* amber – highlight */
  --th-amber-100: #F4DDB3;
  --th-amber-400: #E0AE5A;

  /* berry – problem dots / pain */
  --th-berry-500: #B2546A;

  /* text */
  --th-fg:         #1E2A24;
  --th-fg-soft:    #4E5A4F;
  --th-fg-mute:    #7B7F72;
  --th-fg-onink:   #F4EEE3;
  --th-fg-onink-mute: rgba(244, 238, 227, 0.7);

  /* radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* type */
  --th-serif: "Instrument Serif", "Times New Roman", serif;
  --th-sans: "Geist", "Geist Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --th-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* shadow */
  --sh-1: 0 1px 0 rgba(30, 42, 36, 0.04), 0 1px 2px rgba(30, 42, 36, 0.04);
  --sh-2: 0 2px 8px rgba(30, 42, 36, 0.06), 0 1px 2px rgba(30, 42, 36, 0.05);
  --sh-3: 0 18px 40px -16px rgba(30, 42, 36, 0.18), 0 8px 16px -8px rgba(30, 42, 36, 0.10);
}

/* base */
.th-root {
  font-family: var(--th-sans);
  color: var(--th-fg);
  background: var(--th-paper);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.005em;
}
.th-root *, .th-root *::before, .th-root *::after { box-sizing: border-box; }
.th-root h1, .th-root h2, .th-root h3, .th-root h4 {
  font-family: var(--th-serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0;
  color: var(--th-ink);
}
.th-root p { margin: 0; }
.th-root button { font-family: inherit; }

/* ---- utilities ---- */
.th-eyebrow {
  font-family: var(--th-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--th-fg-mute);
  font-weight: 500;
}
.th-eyebrow .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 999px;
  background: var(--th-clay-500); margin-right: 8px; vertical-align: middle;
  transform: translateY(-1px);
}

/* italic accent — for serif words we want to "breathe" */
.th-italic { font-style: italic; color: var(--th-sage-800); }
.th-clay   { color: var(--th-clay-700); }

/* buttons */
.th-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 20px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
  cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s;
  white-space: nowrap;
}
.th-btn-primary {
  background: var(--th-ink); color: var(--th-fg-onink);
}
.th-btn-primary:hover { background: #111814; }
.th-btn-clay {
  background: var(--th-clay-500); color: #fff;
}
.th-btn-ghost {
  background: transparent; color: var(--th-fg); border-color: var(--th-line-2);
}
.th-btn-soft {
  background: var(--th-paper-2); color: var(--th-fg); border-color: var(--th-line);
}
.th-btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }
.th-btn-lg { height: 52px; padding: 0 26px; font-size: 15px; }

/* chips */
.th-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--th-paper-2); border: 1px solid var(--th-line);
  font-size: 12.5px; color: var(--th-fg-soft); white-space: nowrap;
}
.th-chip-sage { background: var(--th-sage-50); border-color: rgba(110,128,98,0.18); color: var(--th-sage-800); }
.th-chip-clay { background: var(--th-clay-50); border-color: rgba(197,123,95,0.25); color: var(--th-clay-700); }
.th-chip-dark { background: var(--th-ink); border-color: var(--th-ink); color: var(--th-fg-onink); }

/* card */
.th-card {
  background: #FFF; border: 1px solid var(--th-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.th-card-paper {
  background: var(--th-paper);
}
.th-card-ink {
  background: var(--th-ink); color: var(--th-fg-onink);
  border-color: var(--th-ink);
}

/* rule */
.th-rule { height: 1px; background: var(--th-line); border: 0; }

/* verified seal */
.th-verified {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 7px; border-radius: var(--r-pill);
  background: var(--th-sage-50);
  color: var(--th-sage-800);
  font-size: 11.5px; font-weight: 500;
  border: 1px solid rgba(110,128,98,0.18);
}
.th-verified svg { display: block; }

/* avatar ring */
.th-avatar {
  border-radius: 999px;
  background: linear-gradient(135deg, var(--th-sage-200), var(--th-clay-200));
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--th-ink); font-family: var(--th-serif); font-style: italic;
  overflow: hidden;
  flex: 0 0 auto;
}

/* subtle paper grain */
.th-grain {
  position: relative;
}
.th-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(30,42,36,0.025) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
  border-radius: inherit;
}

/* link underline */
.th-link {
  color: var(--th-fg); text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--th-line-2);
}
.th-link:hover { text-decoration-color: var(--th-clay-500); }