/* ============================================================
   TreeScout ROI Calculator — 1:1 uit klantbestand
   Tokens: Aurea Imaging Brandbook v18.07.2022 (kleuren, Exo 2 +
   JetBrains Mono, spacing, schaduwen) — verbatim overgenomen,
   maar gescoped op .tsroi-scope i.p.v. :root zodat het WP-thema
   onaangetast blijft. Rem-waarden zijn omgezet naar px (zelfde
   uitkomst bij 16px root) zodat thema's met afwijkende
   root-font-size de maten niet verstoren.
   ============================================================ */

.tsroi-scope {
  /* ---- Leaf green ---- */
  --green-50:  #F0FFF5;
  --green-100: #D8F6E0;
  --green-200: #AEEBBE;
  --green-300: #80DC97;
  --green-400: #50BE64;   /* ★ brand leaf green */
  --green-500: #3AA551;
  --green-600: #2A8440;

  /* ---- Forest / pine ---- */
  --forest-400: #1C7C68;
  --forest-500: #15705D;
  --forest-600: #0F5046;  /* ★ brand deep green */
  --forest-700: #0A4038;
  --forest-800: #00323C;  /* ★ brand dark teal */
  --forest-900: #00232B;

  /* ---- Neutrals ---- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F6F9F7;
  --neutral-100: #EDF2EF;
  --neutral-200: #DDE5E1;
  --neutral-300: #C3CFCA;
  --neutral-400: #9AA8A3;
  --neutral-500: #6E807A;
  --neutral-700: #354440;

  /* ---- Semantic aliases ---- */
  --brand:          var(--green-400);
  --brand-deep:     var(--forest-600);
  --text-strong:    var(--forest-800);
  --text-body:      var(--neutral-700);
  --text-muted:     var(--neutral-500);
  --surface-page:   var(--green-50);
  --surface-card:   var(--neutral-0);
  --surface-sunken: var(--neutral-50);
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --focus-ring:     rgba(80, 190, 100, 0.55);

  /* ---- Typography ---- */
  --font-sans: "Exo 2", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Exo 2", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-base:16px;
  --text-lg:  18px;
  --text-xl:  22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-5xl: 64px;
  --leading-tight: 1.08;
  --leading-snug: 1.22;
  --leading-normal: 1.5;
  --tracking-tight: -0.01em;
  --tracking-wider: 0.12em;
  --tracking-eyebrow: 0.18em;
  --font-h1: var(--weight-semibold) var(--text-3xl)/var(--leading-snug) var(--font-display);
  --font-h3: var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-display);
  --font-body: var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-sans);
  --font-label: var(--weight-semibold) var(--text-xs)/1.2 var(--font-sans);

  /* ---- Spacing / radius / controls ---- */
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --control-lg: 48px;

  /* ---- Shadows (forest-ink tinted) ---- */
  --shadow-xs: 0 1px 2px rgba(0, 50, 60, 0.06);
  --shadow-sm: 0 1px 3px rgba(0, 50, 60, 0.08), 0 1px 2px rgba(0, 50, 60, 0.04);
  --shadow-lg: 0 12px 28px rgba(0, 50, 60, 0.12), 0 4px 8px rgba(0, 50, 60, 0.06);
  --ring: 0 0 0 3px var(--focus-ring);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);
  --duration-fast: 120ms;

  /* ---- Base (uit design-system reset, gescoped) ---- */
  font: var(--font-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: block;
}

.tsroi-scope *, .tsroi-scope *::before, .tsroi-scope *::after { box-sizing: border-box; }
.tsroi-scope h1, .tsroi-scope h2, .tsroi-scope h3 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.tsroi-scope p { margin: 0; text-wrap: pretty; }
.tsroi-scope a { color: var(--forest-600); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); }
.tsroi-scope a:hover { color: var(--green-500); }
.tsroi-scope button { font-family: inherit; margin: 0; }
.tsroi-scope ::selection { background: var(--green-200); color: var(--forest-800); }
.tsroi-scope :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }
.tsroi-scope label { display: inline; }

.tsroi-scope .aurea-eyebrow {
  font: var(--weight-semibold) var(--text-xs)/1 var(--font-sans);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-deep);
}
.tsroi-scope .aurea-spaced-caps {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* ---- Range slider (verbatim uit klantbestand) ---- */
.tsroi-scope input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--border-default);
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
}
.tsroi-scope input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  border: 0;
}
.tsroi-scope input[type=range]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  border: 0;
}

/* ---- Buttons (gerenderde stijlen van AureaImagingDesignSystem.Button, size lg) ---- */
.tsroi-scope .tsroi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--control-lg);
  padding: 0 28px;
  font: var(--weight-semibold) var(--text-base)/1 var(--font-sans);
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease-standard), filter var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.tsroi-scope .tsroi-btn:hover { filter: brightness(0.94); }
.tsroi-scope .tsroi-btn:active { transform: translateY(1px); }
.tsroi-scope .tsroi-btn-primary {
  background: var(--brand);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: var(--shadow-xs);
}
.tsroi-scope .tsroi-btn-secondary {
  background: var(--surface-card);
  color: var(--brand-deep);
  border: 1.5px solid var(--border-default);
}
.tsroi-scope .tsroi-btn-secondary:hover { color: var(--brand-deep); }

/* ---- Responsief (toevoeging: klantbestand heeft vaste 2 kolommen;
        !important nodig omdat de kolommen inline gestyled zijn) ---- */
@media (max-width: 860px) {
  .tsroi-scope .tsroi-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .tsroi-scope .tsroi-section { padding-left: 20px !important; padding-right: 20px !important; }
  .tsroi-scope .tsroi-stats { grid-template-columns: 1fr !important; }
  .tsroi-scope h1 { font-size: 38px !important; }
}