/* ==========================================================================
   Scales — radius + density (from ref_themes + Tailwind-ish spacing)
   [data-radius="sharp|soft|round|pill"]
   [data-density="compact|cozy|relaxed"]
   ========================================================================== */

/* --- Radius presets (ref_themes approach: one base → derived scale) --- */
[data-radius="sharp"] {
  --radius: 0.125rem;
}

[data-radius="soft"],
:root:not([data-radius]) {
  --radius: 0.75rem;
}

[data-radius="round"] {
  --radius: 1.35rem;
}

[data-radius="pill"] {
  --radius: 1.85rem;
}

/* --- Density / spacing presets --- */
[data-density="compact"] {
  --density: 0.78;
  --space-unit: 0.2rem;
}

[data-density="cozy"],
:root:not([data-density]) {
  --density: 1;
  --space-unit: 0.25rem;
}

[data-density="relaxed"] {
  --density: 1.22;
  --space-unit: 0.3rem;
}

/* --- Control size: buttons + inputs --- */
[data-control="sm"] {
  --control-fs: 0.875rem;
  --control-py: 0.55rem;
  --control-px: 1rem;
  --control-input-py: 0.65rem;
  --control-input-px: 0.85rem;
  --control-gap: 0.5rem;
  --control-sm-fs: 0.8125rem;
}

[data-control="md"],
:root:not([data-control]) {
  --control-fs: 1rem;
  --control-py: 0.9rem;
  --control-px: 1.5rem;
  --control-input-py: 1rem;
  --control-input-px: 1rem;
  --control-gap: 0.75rem;
  --control-sm-fs: 0.875rem;
}

[data-control="lg"] {
  --control-fs: 1.125rem;
  --control-py: 1.15rem;
  --control-px: 1.85rem;
  --control-input-py: 1.2rem;
  --control-input-px: 1.2rem;
  --control-gap: 1rem;
  --control-sm-fs: 1rem;
}

/* Wire control tokens into interactive elements */
.btn-brand,
.btn-brand-outline,
.btn-brand-outline-inverse,
.btn-white-on-brand {
  font-size: var(--control-fs);
  padding: var(--control-py) var(--control-px);
}

.btn-ghost {
  font-size: var(--control-fs);
  padding: var(--control-py) 0.5rem;
}

.btn-sm.btn-brand,
.btn-sm.btn-brand-outline,
.btn.btn-sm {
  font-size: var(--control-sm-fs);
  padding: calc(var(--control-py) * 0.65) calc(var(--control-px) * 0.75);
}

.form-control-brand {
  font-size: var(--control-fs);
  padding: var(--control-input-py) var(--control-input-px);
}

.slot-chip {
  font-size: calc(var(--control-fs) * 0.8);
  padding: calc(var(--control-py) * 0.35) calc(var(--control-px) * 0.45);
}

/* Apply density to common block paddings without rewriting every rule */
.benefit-card,
.icon-tile,
.price-card,
.package-card,
.step-card,
.team-card,
.review-card,
.calc-card,
.contact-panel,
.lead-inline,
.hero-form-card,
.hero-inline-form,
.hero-card,
.fault-card {
  padding: var(--card-pad);
}

.price-card,
.package-card,
.step-card,
.review-card,
.calc-card,
.contact-panel,
.lead-inline {
  padding: var(--card-pad-lg);
}

.mid-cta,
.fault-cta {
  padding: calc(2rem * var(--density)) calc(1.75rem * var(--density));
}