/* ==========================================================================
   BoringTools.io — base.css
   Design tokens + reset. "Tools that just work."
   Visual concept: instrument panel / workshop, not SaaS-card.
   ========================================================================== */

:root {
  /* -- Color: light (default) — clean white finance-tool look -- */
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-sunken: #F6F8F7;
  --text: #16181D;
  --text-muted: #667085;
  --border: #E5E8EC;
  --border-strong: #D0D5DD;
  --accent: #16A34A;        /* green — buttons, active states, focus */
  --accent-strong: #128A3E;
  --accent-contrast: #FFFFFF;
  --increase: #16A34A;
  --decrease: #DC4C3F;
  --focus-ring: #128A3E;
  --card-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .06);

  /* -- Type -- */
  --font-ui: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* -- Scale -- */
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: 2.1rem;
  --step-4: 2.9rem;

  --radius: 10px;
  --content-width: 700px;
  --page-width: 1080px;
}

[data-theme="dark"] {
  --bg: #12141A;
  --surface: #1A1D24;
  --surface-sunken: #20242C;
  --text: #EDEEF1;
  --text-muted: #9AA0AC;
  --border: #2B2F3A;
  --border-strong: #3A3F4C;
  --accent: #22C55E;
  --accent-strong: #4ADE80;
  --accent-contrast: #0B1210;
  --increase: #4ADE80;
  --decrease: #F0897C;
  --focus-ring: #4ADE80;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 20px rgba(0, 0, 0, .35);
}

* , *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color .15s ease, color .15s ease;
}

h1, h2, h3, h4 { font-family: var(--font-ui); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: var(--step-4); letter-spacing: -0.01em; }
h2 { font-size: var(--step-2); margin-top: 2.5em; }
h3 { font-size: var(--step-1); margin-top: 1.75em; }
p { margin: 0 0 1em; max-width: 68ch; }
a { color: inherit; }
a.link { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }

button, input, select { font-family: inherit; font-size: 1rem; color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* -- Print / "Export to PDF" (triggers the browser's own print dialog) -- */
@media print {
  .site-header, .site-footer, .consent-banner, .tool-actions-bar,
  .related-tools, .nav-search, [data-theme-toggle] {
    display: none !important;
  }
  .faq-q .chevron { display: none; }
  .faq-a { display: block !important; }
  .calc-tabs { display: none; }
  [data-calculate] { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
  .calc-card, .readout, .readout-grid { border: 1px solid #000 !important; box-shadow: none !important; break-inside: avoid; }
  .field, .lang-select { border-color: #000 !important; }
}