/* ============================================================
   Tailorly — colors & type tokens.
   Single source of truth, referenced by every preview and UI kit.
   Light theme = warm paper, single clay accent, ink scoring, no gradients.
   ============================================================ */

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

:root {
  /* ---- Type ---- */
  --ts-font-sans:  'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ts-font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Surfaces (warm paper) ---- */
  --ts-bg-page:    #f7f5f0;
  --ts-bg-surface: #ffffff;
  --ts-bg-sunken:  #efece5;
  --ts-bg-hover:   #ecece5;

  /* ---- Ink ---- */
  --ts-ink:        #16161a;
  --ts-ink-2:      #42424a;
  --ts-ink-3:      #6b6b73;
  --ts-ink-4:      #9a9a9f;
  --ts-ink-on-accent: #fbfaf7;

  /* ---- Borders ---- */
  --ts-border:        #e3ddd0;
  --ts-border-strong: #c9c0ad;

  /* ---- Single accent (clay) ---- */
  --ts-accent:        #c8553d;
  --ts-accent-hover:  #b14930;
  --ts-accent-soft:   #f5e7e3;

  /* ---- Semantic ---- */
  --ts-success: #0a7d4f;
  --ts-warn:    #f4c430;
  --ts-error:   #d5283a;
  --ts-info:    #5b3df5;

  /* ---- Score-chip ink scheme (no color, just weight) ---- */
  --ts-score-high-bg:  #1a1a1a;
  --ts-score-high-ink: #fbfaf7;
  --ts-score-good-ink: #1a1a1a;
  --ts-score-good-bd:  #1a1a1a;
  --ts-score-mid-ink:  #6b6b73;
  --ts-score-mid-bd:   #c9c0ad;
  --ts-score-low-ink:  #9a9a9f;
  --ts-score-low-bd:   #e3ddd0;

  /* ---- Selection ---- */
  --ts-selection-bg: #1a1a1a;
  --ts-selection-fg: #fbfaf7;

  /* ---- Shadows ---- */
  --ts-shadow-1: 0 1px 0 rgba(22,22,26,.04), 0 1px 2px rgba(22,22,26,.04);
  --ts-shadow-2: 0 2px 0 rgba(22,22,26,.04), 0 4px 12px rgba(22,22,26,.06);
  --ts-shadow-focus: 0 0 0 3px rgba(200,85,61,.25);
}

/* ts-light is the default body class throughout the design system. */
.ts-light {
  background: var(--ts-bg-page);
  color: var(--ts-ink);
  font-family: var(--ts-font-sans);
}