/* ThetaSmart / Theta Neo — design tokens
 * Source: Figma "ThetaSmart iOS Component Library" /Colors-and-fonts
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=Inter:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Surfaces (warm paper) ──────────────────────────────── */
  --ts-bg:          #F4F1EC;
  --ts-paper:       #FBFAF7;
  --ts-line:        #E8E4DC;
  --ts-line-soft:   #EFECE5;
  --ts-hairline:    rgba(216,220,230,0.4);

  /* ── Ink ────────────────────────────────────────────────── */
  --ts-ink:         #1A1A1A;
  --ts-ink-soft:    #5C5A57;
  --ts-ink-faint:   #9B9894;
  --ts-ink-meta:    #6B7A90;

  /* ── Brand (sage / gold / navy) ─────────────────────────── */
  --ts-accent:      #2F4A3A;
  --ts-accent-soft: #E6EDE6;
  --ts-gold:        #A88658;
  --ts-gold-soft:   #F5EFE4;
  --ts-navy:        #0D1E3A;

  /* ── Informational ──────────────────────────────────────── */
  --ts-info:        #3B6B9C;
  --ts-info-soft:   #E4EDF5;

  /* ── Interactive (chat / buttons) ───────────────────────── */
  --ts-primary:     #5A9EF9;
  --ts-primary-tint:#EBF3FE;
  --ts-primary-ink: #F0F7FF;
  --ts-active:      #0E3880;
  --ts-input-bg:    #EFECE5;      /* chat input; was #E8ECF1 */
  --ts-input-border:#D8DCE6;

  /* ── Chat voice (Apr 2026 refresh) ──────────────────────── */
  --ts-user-bubble: #0D1E3A;      /* user voice = navy */
  --ts-user-bubble-ink:#FFFFFF;
  --ts-asst-block-bg:#F4F1EC;     /* assistant pull-quote */
  --ts-send-btn:    #0E3880;      /* was primary blue */

  /* ── Semantic ───────────────────────────────────────────── */
  --ts-warn:        #C07A3A;
  --ts-warn-soft:   #FAF0E3;
  --ts-error:       #B03A2E;
  --ts-error-soft:  #FCEAEA;

  /* ── Shadow ─────────────────────────────────────────────── */
  --ts-shadow-sm:   0 1px 2px rgba(0,0,0,0.06);
  --ts-shadow-md:   0 4px 12px rgba(0,0,0,0.07);

  /* ── Radius ─────────────────────────────────────────────── */
  --ts-r-xs:        4px;
  --ts-r-sm:        8px;
  --ts-r:           12px;
  --ts-r-lg:        16px;
  --ts-r-xl:        20px;
  --ts-r-pill:      9999px;

  /* ── Spacing (4-base) ───────────────────────────────────── */
  --ts-s-1:         4px;
  --ts-s-2:         8px;
  --ts-s-3:         12px;
  --ts-s-4:         16px;
  --ts-s-5:         20px;
  --ts-s-6:         24px;
  --ts-s-8:         32px;
  --ts-s-10:        40px;
  --ts-s-12:        48px;

  /* ── Type families ──────────────────────────────────────── */
  --ts-font-display: 'Fraunces', Georgia, serif;
  --ts-font-body:    'Source Sans 3', system-ui, -apple-system, sans-serif;
  --ts-font-ui:      'Inter', system-ui, -apple-system, sans-serif;
  --ts-font-mono:    'Geist Mono', 'SF Mono', ui-monospace, Menlo, monospace;
}

/* ── Semantic text classes ─────────────────────────────── */
.ts-hero-big     { font-family: var(--ts-font-body);    font-weight: 700; font-size: 56px; line-height: 1.05; color: var(--ts-ink); letter-spacing: -0.02em; }
.ts-page-title   { font-family: var(--ts-font-display); font-weight: 600; font-size: 30px; line-height: 1.1;  color: var(--ts-ink); letter-spacing: -0.01em; }
.ts-dx-hero      { font-family: var(--ts-font-display); font-weight: 600; font-size: 24px; line-height: 1.15; color: var(--ts-ink); }
.ts-hero-metric  { font-family: var(--ts-font-body);    font-weight: 700; font-size: 24px; line-height: 1;    color: var(--ts-ink); }
.ts-vital-value  { font-family: var(--ts-font-mono);    font-weight: 600; font-size: 22px; line-height: 1;    color: var(--ts-ink); }
.ts-stat-value   { font-family: var(--ts-font-body);    font-weight: 700; font-size: 20px; line-height: 1;    color: var(--ts-ink); }
.ts-csh-metric   { font-family: var(--ts-font-body);    font-weight: 600; font-size: 17px; line-height: 1.2;  color: var(--ts-ink); }
.ts-body         { font-family: var(--ts-font-body);    font-weight: 400; font-size: 15px; line-height: 1.45; color: var(--ts-ink); }
.ts-body-sm      { font-family: var(--ts-font-body);    font-weight: 400; font-size: 13px; line-height: 1.4;  color: var(--ts-ink-soft); }
.ts-ui           { font-family: var(--ts-font-ui);      font-weight: 500; font-size: 14px; line-height: 1.2;  color: var(--ts-ink); }
.ts-ui-strong    { font-family: var(--ts-font-ui);      font-weight: 700; font-size: 15px; line-height: 1.2;  color: var(--ts-ink); }
.ts-mono-label   { font-family: var(--ts-font-mono);    font-weight: 500; font-size: 11px; line-height: 1;    color: var(--ts-ink-faint); letter-spacing: 0.88px; text-transform: uppercase; }
.ts-pill-label   { font-family: var(--ts-font-mono);    font-weight: 500; font-size: 10px; line-height: 1;    color: var(--ts-ink-faint); letter-spacing: 0.6px;  text-transform: uppercase; }
.ts-eyebrow      { font-family: var(--ts-font-ui);      font-weight: 700; font-size: 10px; line-height: 1;    color: var(--ts-ink-faint); letter-spacing: 1.2px;  text-transform: uppercase; }

/* ── Map classic selectors ─────────────────────────────── */
h1 { font-family: var(--ts-font-display); font-weight: 600; font-size: 30px; color: var(--ts-ink); letter-spacing: -0.01em; margin: 0; }
h2 { font-family: var(--ts-font-display); font-weight: 600; font-size: 24px; color: var(--ts-ink); margin: 0; }
h3 { font-family: var(--ts-font-body);    font-weight: 700; font-size: 17px; color: var(--ts-ink); margin: 0; }
h4 { font-family: var(--ts-font-ui);      font-weight: 600; font-size: 14px; color: var(--ts-ink-soft); margin: 0; letter-spacing: 0.02em; }
p  { font-family: var(--ts-font-body);    font-weight: 400; font-size: 15px; line-height: 1.45; color: var(--ts-ink); margin: 0; }
code, pre { font-family: var(--ts-font-mono); font-size: 13px; color: var(--ts-accent); }