/* ──────────────────────────────────────────────────────────────
   run a call. — Design tokens
   Brand-defined palette (forest green on warm off-white).
   Typography: Inter (Söhne substitute) + JetBrains Mono.
   ────────────────────────────────────────────────────────────── */

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

:root {
  /* ── Surfaces ───────────────────────────────────────────── */
  --rac-canvas:        #f6f4ee;   /* warm linen / off-white */
  --rac-surface:       #fbfaf6;   /* card */
  --rac-surface-2:     #f1efe8;   /* subtle muted plate */
  --rac-ink:           #0f1411;   /* charcoal headline */
  --rac-ink-2:         #2a2f2c;   /* body */
  --rac-ink-3:         #5b605c;   /* secondary */
  --rac-ink-4:         #8a8e89;   /* tertiary / labels */

  /* ── Borders ───────────────────────────────────────────── */
  --rac-line:          #e3dfd5;   /* hairline default */
  --rac-line-strong:   #c9c5b8;   /* hairline emphasized */
  --rac-line-soft:     #ece9df;

  /* ── Brand: forest green ───────────────────────────────── */
  --rac-green-900:     #08382a;
  --rac-green-800:     #0b4a37;
  --rac-green:         #0e7c5a;   /* PRIMARY — wordmark dot */
  --rac-green-600:     #14916b;
  --rac-green-100:     #dfece6;   /* tint */
  --rac-green-50:      #eef5f1;

  /* ── Earthy accent palette (used sparingly) ────────────── */
  --rac-terracotta:    #b9583e;
  --rac-terracotta-50: #f3e2db;
  --rac-plum:          #6b3f5c;
  --rac-plum-50:       #ebe1e7;
  --rac-olive:         #6f7a3a;
  --rac-olive-50:      #ebeede;
  --rac-slate:         #4a5560;
  --rac-slate-50:      #e3e7eb;
  --rac-amber:         #b07a16;
  --rac-amber-50:      #f4ebd7;

  /* ── Status (desaturated, in-system) ───────────────────── */
  --rac-status-ok-bg:  #e6efe8;  --rac-status-ok-fg:  #2c5a3c;
  --rac-status-warn-bg:#f4ebd7;  --rac-status-warn-fg:#7a5215;
  --rac-status-err-bg: #f3e2db;  --rac-status-err-fg: #8a3520;
  --rac-status-info-bg:#e3e7eb;  --rac-status-info-fg:#39444f;

  /* ── Typography ────────────────────────────────────────── */
  --rac-sans:    "Inter", "Söhne", "GT America", ui-sans-serif, system-ui, sans-serif;
  --rac-display: "Inter Tight", "Söhne", "GT America", ui-sans-serif, system-ui, sans-serif;
  --rac-mono:    "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", monospace;

  /* ── Type scale ────────────────────────────────────────── */
  --rac-fs-display: 64px;   --rac-lh-display: 1.04;   --rac-tr-display: -0.035em;
  --rac-fs-h1:      44px;   --rac-lh-h1:      1.06;   --rac-tr-h1:      -0.030em;
  --rac-fs-h2:      32px;   --rac-lh-h2:      1.12;   --rac-tr-h2:      -0.022em;
  --rac-fs-h3:      22px;   --rac-lh-h3:      1.25;   --rac-tr-h3:      -0.012em;
  --rac-fs-lead:    18px;   --rac-lh-lead:    1.55;   --rac-tr-lead:    -0.005em;
  --rac-fs-body:    15px;   --rac-lh-body:    1.6;    --rac-tr-body:    0;
  --rac-fs-small:   13px;   --rac-lh-small:   1.5;    --rac-tr-small:   0;
  --rac-fs-micro:   11px;   --rac-lh-micro:   1.3;    --rac-tr-micro:   0.12em;  /* ALL CAPS labels */
  --rac-fs-mono:    13px;   --rac-lh-mono:    1.5;

  /* ── Spacing (4pt) ─────────────────────────────────────── */
  --rac-s-1:  4px;
  --rac-s-2:  8px;
  --rac-s-3:  12px;
  --rac-s-4:  16px;
  --rac-s-5:  20px;
  --rac-s-6:  24px;
  --rac-s-8:  32px;
  --rac-s-10: 40px;
  --rac-s-12: 48px;
  --rac-s-16: 64px;
  --rac-s-20: 80px;
  --rac-s-24: 96px;

  /* ── Radii ─────────────────────────────────────────────── */
  --rac-r-xs:  3px;
  --rac-r-sm:  6px;
  --rac-r-md:  10px;
  --rac-r-lg:  14px;
  --rac-r-pill: 999px;

  /* ── Hairlines & “shadows” ─────────────────────────────── */
  --rac-border:        1px solid var(--rac-line);
  --rac-border-strong: 1px solid var(--rac-line-strong);
  /* No drop shadows in marketing/site — hairlines only.
     Inside product app, allow ONE soft elevation. */
  --rac-elev-1: 0 1px 0 rgba(15, 20, 17, 0.04), 0 1px 2px rgba(15, 20, 17, 0.04);

  /* ── Motion ────────────────────────────────────────────── */
  --rac-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --rac-dur-fast: 120ms;
  --rac-dur:      200ms;
  --rac-dur-slow: 360ms;
}

/* ──────────────────────────────────────────────────────────────
   Semantic element styles — opt-in via .rac
   ────────────────────────────────────────────────────────────── */

.rac {
  font-family: var(--rac-sans);
  font-size: var(--rac-fs-body);
  line-height: var(--rac-lh-body);
  color: var(--rac-ink-2);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.rac { background: var(--rac-canvas); }

.rac h1, .rac .h1 {
  font-family: var(--rac-display);
  font-size: var(--rac-fs-h1);
  line-height: var(--rac-lh-h1);
  letter-spacing: var(--rac-tr-h1);
  font-weight: 600;
  color: var(--rac-ink);
  margin: 0;
}
.rac .display {
  font-family: var(--rac-display);
  font-size: var(--rac-fs-display);
  line-height: var(--rac-lh-display);
  letter-spacing: var(--rac-tr-display);
  font-weight: 600;
  color: var(--rac-ink);
}
.rac h2, .rac .h2 {
  font-family: var(--rac-display);
  font-size: var(--rac-fs-h2);
  line-height: var(--rac-lh-h2);
  letter-spacing: var(--rac-tr-h2);
  font-weight: 600;
  color: var(--rac-ink);
  margin: 0;
}
.rac h3, .rac .h3 {
  font-family: var(--rac-sans);
  font-size: var(--rac-fs-h3);
  line-height: var(--rac-lh-h3);
  letter-spacing: var(--rac-tr-h3);
  font-weight: 600;
  color: var(--rac-ink);
  margin: 0;
}
.rac .lead {
  font-size: var(--rac-fs-lead);
  line-height: var(--rac-lh-lead);
  letter-spacing: var(--rac-tr-lead);
  color: var(--rac-ink-3);
}
.rac p, .rac .body { font-size: var(--rac-fs-body); line-height: var(--rac-lh-body); color: var(--rac-ink-2); margin: 0; }
.rac .small { font-size: var(--rac-fs-small); line-height: var(--rac-lh-small); color: var(--rac-ink-3); }

/* ALL CAPS micro-label — the signature pre-header */
.rac .eyebrow,
.rac .micro {
  font-family: var(--rac-sans);
  font-size: var(--rac-fs-micro);
  line-height: var(--rac-lh-micro);
  letter-spacing: var(--rac-tr-micro);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rac-ink-3);
}

/* Mono — for spec sheets / pricing tables */
.rac code, .rac .mono, .rac .spec {
  font-family: var(--rac-mono);
  font-size: var(--rac-fs-mono);
  line-height: var(--rac-lh-mono);
  font-feature-settings: "tnum", "zero";
  letter-spacing: -0.005em;
}

/* Buttons (forest-green pills, ghost variant with same green border) */
.rac .btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; height: 44px; padding: 0 22px;
  border-radius: var(--rac-r-pill); border: 1px solid transparent;
  font-family: var(--rac-sans); font-size: 14px; font-weight: 600;
  letter-spacing: -0.005em; cursor: pointer;
  transition: background var(--rac-dur-fast) var(--rac-ease),
              color var(--rac-dur-fast) var(--rac-ease),
              border-color var(--rac-dur-fast) var(--rac-ease),
              transform var(--rac-dur-fast) var(--rac-ease);
}
.rac .btn--primary { background: var(--rac-green); color: #fff; }
.rac .btn--primary:hover { background: var(--rac-green-800); }
.rac .btn--primary:active { transform: translateY(1px); }
.rac .btn--ghost   { background: transparent; color: var(--rac-green); border-color: var(--rac-green); }
.rac .btn--ghost:hover { background: var(--rac-green-50); }
.rac .btn--quiet   { background: transparent; color: var(--rac-ink); }
.rac .btn--quiet:hover { background: var(--rac-surface-2); }
.rac .btn--sm { height: 36px; padding: 0 16px; font-size: 13px; }

/* Hairline panels and chips */
.rac .panel { background: var(--rac-surface); border: var(--rac-border); border-radius: var(--rac-r-lg); }
.rac .chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: var(--rac-r-pill);
  font-size: 12px; font-weight: 500; color: var(--rac-ink-2);
  background: var(--rac-surface-2); border: 1px solid var(--rac-line);
}
.rac .chip--green { color: var(--rac-green); background: var(--rac-green-50); border-color: var(--rac-green-100); }

/* Underline link */
.rac a.link {
  color: var(--rac-ink); text-decoration: none;
  border-bottom: 1px solid var(--rac-line-strong);
  padding-bottom: 1px; transition: border-color var(--rac-dur-fast);
}
.rac a.link:hover { border-color: var(--rac-green); color: var(--rac-green); }

/* Selection */
.rac ::selection { background: var(--rac-green); color: #fff; }

/* Pulsing live-status dot — used in integrations + status pills */
@keyframes rac-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(14, 124, 90, 0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(14, 124, 90, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(14, 124, 90, 0);    }
}
.rac .pulse-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rac-green);
  animation: rac-pulse 1.8s var(--rac-ease) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .rac .pulse-dot { animation: none; box-shadow: 0 0 0 3px rgba(14, 124, 90, 0.18); }
}

/* Modal entrance */
@keyframes rac-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rac-pop-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}