/* FireBuddy identity layer — v2 "bright & friendly" (founder's pick,
 * 2026-10-19; see index.html, which defines the same system).
 *
 * Loaded LAST in <head> on FireBuddy's own pages (login, signup, consult,
 * welcome, help, assess, privacy, eula, agents, thank-you, docs) and on the
 * customer payment pages (pay, invoice; book for FireBuddy's own call link).
 * It re-points the variables those pages already use (--blue, --ink,
 * --border, --surface…) and swaps the type, so one file restyles them all.
 * Page-specific blocks (pay, invoice, help, book) use the --fb-* tokens below,
 * so keep the token NAMES stable when re-theming.
 *
 * Fonts: the page must also link
 *   https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@500;600;700&family=Figtree:wght@400;500;600;700;800&display=swap
 */
:root {
  --fb-paper: #F6F4F1;     /* warm off-white ground */
  --fb-sheet: #FFFFFF;     /* cards */
  --fb-ink: #1C1B22;
  --fb-ink-2: #5B5965;
  --fb-ink-3: #8A8794;
  --fb-rule: #E7E5EC;
  --fb-forest: #1C1B22;    /* dark bands (name kept for page blocks) */
  --fb-forest-2: #33313C;  /* dark hover */
  --fb-ember: #0A8754;     /* emerald — the main action + approved/paid (was coral) */
  --fb-ember-d: #076E44;
  --fb-ember-w: #DDF3E7;
  --fb-paid: #0A8754;
  --f-display: 'Familjen Grotesk', system-ui, sans-serif;
  --f-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* The old variables, re-pointed. */
  --blue: var(--fb-ink);
  --blue-dark: var(--fb-forest-2);
  --blue-light: #4A4855;
  --blue-mid: #ECEAF0;
  --blue-pale: #F3F1EE;
  --ink: var(--fb-ink);
  --ink-mid: var(--fb-ink-2);
  --ink-soft: var(--fb-ink-3);
  --border: var(--fb-rule);
  --surface: var(--fb-paper);
  --bg: var(--fb-paper);
  --white: var(--fb-sheet);
  --fire: var(--fb-ember);
  --orange: var(--fb-ember);
  --warm: var(--fb-ember);
  --green: var(--fb-paid);
  --success: var(--fb-paid);
  --success-dark: #0F7A4F;
  --font: var(--f-body);
}

html body { background: var(--fb-paper); color: var(--fb-ink); font-family: var(--f-body) !important; -webkit-font-smoothing: antialiased; }
/* Pages set Manrope inline on buttons and inputs; inline styles need !important to beat. */
button, input, select, textarea, [style*="Manrope"] { font-family: var(--f-body) !important; }
code, pre, kbd { font-family: var(--f-mono); }
.mono { font-variant-numeric: tabular-nums; }

h1, h2, h3, .hero-title {
  font-family: var(--f-display) !important;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h1, .hero-title { font-weight: 700; line-height: 1.04; }
h2 { font-weight: 700; line-height: 1.08; }
h3 { font-weight: 700; letter-spacing: -0.02em; }

/* Buttons: emerald pill for the main action, soft outline pill for the rest. */
.btn-primary, .btn-submit, button.btn-primary, a.btn-primary {
  background: var(--fb-ember) !important;
  color: #fff !important;
  border-color: var(--fb-ember) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
.btn-primary:hover, .btn-submit:hover:not(:disabled) { background: var(--fb-ember-d) !important; border-color: var(--fb-ember-d) !important; }
.btn-ghost, .btn-secondary, .btn-outline {
  border-radius: 999px !important;
  border: 2px solid var(--fb-rule) !important;
  color: var(--fb-ink) !important;
  background: var(--fb-sheet) !important;
}
.btn-ghost:hover, .btn-secondary:hover { border-color: #D3D0DA !important; }
.btn:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--fb-ember); outline-offset: 2px;
}
input:focus, select:focus, textarea:focus { border-color: var(--fb-ink) !important; }
input, select, textarea { border-radius: 12px; }

/* Cards: soft, rounded, white on the warm ground. */
.card { background: var(--fb-sheet); border-color: var(--fb-rule) !important; border-radius: 22px !important; box-shadow: 0 24px 56px -40px rgba(28, 27, 34, 0.35) !important; }

/* Logo: white flame in an emerald circle instead of the emoji tile. */
.logo-icon, .logo-mark, .brand-mark {
  font-size: 0 !important; display: inline-block; width: 28px; height: 28px; flex: 0 0 28px; color: transparent !important;
  background: var(--fb-ember) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 14 16'%3E%3Cpath d='M7 0c.6 3-2.6 4.3-2.6 7.4 0 1.2.7 2.1 1.6 2.4-.2-1.6.8-2.6 1.9-3.4.1 1.8 2.6 2.4 2.6 4.6A3.6 3.6 0 0 1 7 14.6 4.9 4.9 0 0 1 2 9.7C2 5 7 3.8 7 0z' fill='%23ffffff'/%3E%3C/svg%3E") center / 13px no-repeat !important;
  border-radius: 50% !important; box-shadow: none !important;
}
.logo, .brand { font-family: var(--f-display) !important; font-weight: 700 !important; letter-spacing: -0.02em; color: var(--fb-ink) !important; }

/* Eyebrows / pills: a soft mint label. */
.pill, .hero-badge, .section-tag, .section-title {
  font-family: var(--f-body) !important; letter-spacing: 0 !important; text-transform: none;
  background: var(--fb-ember-w) !important; color: var(--fb-ember-d) !important; border: 0 !important;
  border-radius: 999px !important; font-weight: 700 !important;
}

a { text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
::selection { background: var(--fb-ember-w); color: var(--fb-ink); }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}