/* Trader Headspace — design tokens
   Single source of truth. Maps 1:1 to breath-tokens.jsx for runtime use.
*/

:root {
  /* ─── Color ─── */
  --th-bg:          #F4EFE6;  /* warm cream — app background */
  --th-surface:     #FBF7F0;  /* card fill */
  --th-surface-2:   #EFE8DB;  /* nested / pressed */
  --th-ink:         #1F1B16;  /* primary type */
  --th-ink-2:       #6B6156;  /* secondary type */
  --th-ink-3:       #A89E92;  /* muted type + eyebrows */
  --th-line:        #E6DFD2;  /* hairline */
  --th-line-2:      #D8CFBF;  /* stronger divider */

  --th-accent:      #B8553A;  /* terracotta — emphasis */
  --th-accent-soft: #E8D3C6;  /* tinted fills */
  --th-accent-deep: #8C3E29;  /* press state on accent */

  --th-sage:        #7A8B6F;  /* positive state ONLY */
  --th-sage-soft:   #D6DDCF;

  /* Timing-category tones (used on flow icons) */
  --th-slate:       #495A6B;  --th-slate-soft: #D1D9E0;  /* mid-session */
  --th-plum:        #6B4A5E;  --th-plum-soft:  #DCCFD6;  /* post-market */
  --th-gold:        #A88A3A;  --th-gold-soft:  #E8DCC0;  /* weekly */

  /* ─── Type ─── */
  --th-font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --th-font-body:    "Inter", -apple-system, system-ui, sans-serif;
  --th-font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ─── Spacing (4px base) ─── */
  --th-s-1: 4px;
  --th-s-2: 8px;
  --th-s-3: 10px;
  --th-s-4: 14px;
  --th-s-5: 18px;
  --th-s-6: 22px;
  --th-s-7: 28px;   /* standard screen padding */
  --th-s-8: 36px;

  /* ─── Radius ─── */
  --th-r-sm:   12px;
  --th-r-md:   14px;
  --th-r-lg:   16px;
  --th-r-tile: 18px;
  --th-r-card: 20px;
  --th-r-pill: 999px;

  /* ─── Elevation (used sparingly) ─── */
  --th-shadow-accent: 0 12px 32px rgba(184, 85, 58, 0.30);
}

/* ─── Semantic type roles ─── */

.th-eyebrow {
  font-family: var(--th-font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--th-ink-3);
}

.th-eyebrow--accent { color: var(--th-accent); }

.th-title {
  font-family: var(--th-font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--th-ink);
}

.th-title em,
.th-emph {
  font-style: italic;
  color: var(--th-accent);
  font-weight: inherit;
}

.th-h2 {
  font-family: var(--th-font-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--th-ink);
}

.th-h3 {
  font-family: var(--th-font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--th-ink);
}

.th-body {
  font-family: var(--th-font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--th-ink);
}

.th-body-sm {
  font-family: var(--th-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--th-ink-2);
}

.th-meta,
.th-mono {
  font-family: var(--th-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--th-ink-2);
  text-transform: uppercase;
}

.th-quote {
  font-family: var(--th-font-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--th-ink);
  border-left: 2px solid var(--th-accent);
  padding-left: 14px;
}

/* ─── Components ─── */

.th-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 20px;
  background: var(--th-ink);
  color: var(--th-bg);
  border: none;
  border-radius: var(--th-r-pill);
  font-family: var(--th-font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.th-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  background: transparent;
  color: var(--th-ink);
  border: 1px solid var(--th-line);
  border-radius: var(--th-r-pill);
  font-family: var(--th-font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.th-card {
  background: var(--th-surface);
  border: 1px solid var(--th-line);
  border-radius: var(--th-r-card);
  padding: 20px 22px;
}

.th-hairline {
  border-bottom: 1px solid var(--th-line);
}