/* ============================================================================
   CSS FOR TSUF — core palette + primitives shared with the offer-page builder
   ----------------------------------------------------------------------------
   This file exposes the tiny set of tokens Tsuf’s AI UI needs:
   • Assistant font everywhere
   • 4px radius baseline
   • Dark + light palettes (3 background tiers + 3 foreground tiers)
   • Warm accent gradient taken from the builder’s CTA buttons
   ========================================================================== */

:root {
  --tsuf-font-family: 'Assistant', sans-serif;
  --tsuf-radius: 4px;
}

.tsuf-theme {
  font-family: var(--tsuf-font-family);
  border-radius: var(--tsuf-radius);
}

/* ---------------------------------------------------------------------------
   DARK THEME — pulled directly from the offer-page creation form
   --------------------------------------------------------------------------- */
.tsuf-theme--dark {
  --tsuf-bg-outer: #141414;                 /* panel canvas */
  --tsuf-bg-panel: #0f0f0f;                 /* input/textarea background */
  --tsuf-bg-field: #090909;                 /* select + deep wells */
  --tsuf-text-strong: #ffffff;
  --tsuf-text-body: rgba(255, 255, 255, 0.85);
  --tsuf-text-muted: rgba(255, 255, 255, 0.6);
  --tsuf-border: rgba(255, 255, 255, 0.16);
  --tsuf-card-overlay: rgba(255, 255, 255, 0.04);
  --tsuf-accent-warm-start: #ff7050;
  --tsuf-accent-warm-end: #ffa34c;
}

/* ---------------------------------------------------------------------------
   LIGHT THEME — mirrors the spacing/tone we use on public pages
   --------------------------------------------------------------------------- */
.tsuf-theme--light {
  --tsuf-bg-outer: #ffffff;
  --tsuf-bg-panel: #f6f6f6;
  --tsuf-bg-field: #ededed;
  --tsuf-text-strong: #1f1f1f;
  --tsuf-text-body: #3a3a3a;
  --tsuf-text-muted: #6b6b6b;
  --tsuf-border: rgba(0, 0, 0, 0.08);
  --tsuf-card-overlay: #fff7ef;
  --tsuf-accent-warm-start: #ff7f4d;
  --tsuf-accent-warm-end: #ffb36d;
}

/* ---------------------------------------------------------------------------
   Utility primitives Tsuf can re-use when assembling layouts
   --------------------------------------------------------------------------- */
.tsuf-card {
  background: var(--tsuf-bg-outer);
  border: 1px solid var(--tsuf-border);
  border-radius: var(--tsuf-radius);
  padding: 24px;
  color: var(--tsuf-text-body);
}

.tsuf-field {
  background: var(--tsuf-bg-panel);
  border: 1px solid var(--tsuf-border);
  border-radius: var(--tsuf-radius);
  color: var(--tsuf-text-strong);
  padding: 12px 14px;
}

.tsuf-field--well {
  background: var(--tsuf-bg-field);
}

.tsuf-heading {
  font-size: 24px;
  font-weight: 800;
  color: var(--tsuf-text-strong);
  margin: 0 0 8px;
}

.tsuf-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--tsuf-text-body);
  margin: 0;
}

.tsuf-muted {
  color: var(--tsuf-text-muted);
}

.tsuf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--tsuf-radius);
  border: 1px solid transparent;
  font-weight: 700;
  cursor: pointer;
  color: var(--tsuf-text-strong);
  background:
    linear-gradient(var(--tsuf-bg-field, #fff), var(--tsuf-bg-field, #fff)) padding-box,
    linear-gradient(90deg, var(--tsuf-accent-warm-start), var(--tsuf-accent-warm-end)) border-box;
}