/* OSDC palette from the company deck: black, warm off-white and sage.
   Overrides the Cask Equity color settings only. Remove this file to go back to blue. */
:root, .calc {
  --bg: #f4f4ef; --card: #ffffff;
  --ink: #0a0a0a; --ink-2: #1d1f1b;
  --muted: #5f6259; --faint: #8b8e84;
  --line: #d9dbd1; --line-soft: #e8e9e1;
  --blue: #a3ad9a; --blue-hover: #94a089; --blue-soft: #e7eadf; --blue-text: #4f5b45;
  --on-dark-muted: #b1b4a9; --on-dark-blue: #bcc6b2;
  --color-amber: #a3ad9a; --color-copper: #55604a; --color-slate: #c9ccc2;
  --grid-line: rgba(10,10,10,.08);
}
.site-header { background: rgba(244,244,239,.92); }

/* Buttons are black; sage is for panels and accents */
.header-actions .btn, .btn-blue, .plan.featured .btn-primary { background: var(--ink); color: #fff; }
.btn { transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease; }

/* Hover flips each button: black turns white, white turns black */
.btn-primary:hover, .btn-dark:hover, .header-actions .btn:hover, .btn-blue:hover,
.cta-inner .btn-light:hover, .plan.featured .btn-primary:hover, .osdc-form button:hover {
  background: #fff; color: var(--ink); border-color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Sage panels carry black text */
.kpi.blue, .cell.blue, .cta-inner, .badge { color: var(--ink); }
.kpi.blue small, .kpi.blue .d, .cell.blue p, .cta-inner p { color: #2f3529; }
.kpi.blue .d b, .cell.blue .k { color: var(--ink); }
.cta .btn-link, .cta-inner .btn-link { color: var(--ink); }
.cta-inner .btn-light { background: var(--ink); color: #fff; }

/* Small marks need a deeper sage to show on the light background */
.eyebrow::before, .pill i, .prose ul li::before { background: #7f8c73; }
.checklist svg, .plan li svg { color: #6c7960; }
:focus-visible { outline-color: #4f5b45; }
.osdc-form input:focus, .osdc-form select:focus, .osdc-form textarea:focus { border-color: #6c7960; }
/* Dark panels: warm greys in place of the blue-tinted ones */
.stage .bar i, .device-browser .dots i { background: #2e302a; }
.mini-calc input { background: #1d1f1b; border-color: #2e302a; }
.device-browser .urlbar { background: #1d1f1b; }
.callout .principles li { border-color: #2a2c26; }
.tour-shot img { border-color: #2e302a; }