/*!
 * SoloStack shared site styles.
 *
 * Every page loads this file via <link rel="stylesheet" href="/css/site.css">.
 * It holds the handful of custom CSS rules that sit on top of Tailwind's
 * utility classes — base typography, accessibility touches, and the small
 * set of micro-interactions (result fade-ins, print view) reused across
 * tool pages. Centralizing this means a change here (e.g. adjusting the
 * focus ring color) applies everywhere at once instead of needing to be
 * copy-pasted into every page's <style> block.
 *
 * Some rules below (e.g. .step-line, the print media query) only apply to
 * specific pages that use those classes/ids. Leaving them in this shared
 * file is harmless for pages that don't use them — they simply never match.
 */

/* ============ Theme tokens (light + dark) ============ */
/*
 * Color values used by css/tailwind-config.js. Editing a value here updates
 * every page that uses the matching Tailwind utility class (bg-secondary,
 * text-textSecondary, etc.) — no HTML edits needed.
 *
 * `primary` / `primaryDark` are NOT defined as variables and are not listed
 * here — they stay literal hex in tailwind-config.js on purpose (see the
 * comment there). Every other brand color is theme-aware.
 *
 * Dark values were chosen and verified against WCAG 2.1 contrast minimums
 * (4.5:1 for normal text, 3:1 for large text/UI) using each color's actual
 * on-page role — e.g. `ink` is checked against both --color-bgBase and
 * --color-surface, since it appears on both. Re-verify with a contrast
 * checker if you change any of these.
 */
:root {
  --color-ink: #1F3A5F;
  --color-secondary: #3E6B6B;
  --color-secondaryDark: #2E5252;
  --color-accent: #B8874B;
  --color-success: #6B8F71;
  --color-caution: #B5563C;
  --color-textPrimary: #22262B;
  --color-textSecondary: #5B6570;
  --color-bgBase: #F7F6F3;
  --color-bgAlt: #EFEEEA;
  --color-surface: #FFFFFF;
  --color-borderC: #E4E1DA;
  /* Two extra decorative-only swatches used solely for chart category
     colors (Monthly Cash Flow Tracker's "Debt" and "Other" categories) —
     not exposed as Tailwind utility classes, referenced directly via
     `var(--color-chartBrown)` / `var(--color-chartGray)` in inline styles. */
  --color-chartBrown: #8A5A44;
  --color-chartGray: #7A8087;
}

html.dark {
  --color-ink: #7FA8DA;
  --color-secondary: #83BDBD;
  --color-secondaryDark: #A3D2D2;
  --color-accent: #DCB183;
  --color-success: #93C89E;
  --color-caution: #E29070;
  --color-textPrimary: #E8E9EA;
  --color-textSecondary: #ACB3BB;
  --color-bgBase: #14181D;
  --color-bgAlt: #1B2026;
  --color-surface: #232A32;
  --color-borderC: #39424C;
  --color-chartBrown: #C99A80;
  --color-chartGray: #9DA4AC;
}

/* ============ Base typography ============ */
body {
  font-family: 'Inter', sans-serif;
  background: var(--color-bgBase);
  color: var(--color-textPrimary);
  transition: background-color .15s ease, color .15s ease;
}
.font-heading {
  font-family: '"Source Serif 4"', Georgia, serif;
}

/* ============ Accessibility ============ */
/* Visible keyboard-focus ring on interactive elements. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

/* 16px minimum font size on form fields prevents iOS Safari from
   auto-zooming the page when a field is focused. */
input[type="text"],
input[type="number"],
select {
  font-size: 16px;
}

/* Respect the user's OS-level motion preference. */
@media (prefers-reduced-motion: reduce) {
  .transition,
  .transition-all,
  .results-in {
    transition: none !important;
    animation: none !important;
  }
}

/* ============ Micro-interactions ============ */
/* Step-connector gradient line used on multi-step calculators
   (Irregular Income Budget Calculator, Quarterly Tax Estimator). */
.step-line {
  background: linear-gradient(to bottom, var(--color-ink), var(--color-borderC));
}

/* Fade-in applied to a results panel when it's revealed (classList.remove
   ('hidden')) after a calculation. Replays automatically each time the
   element goes from display:none to visible. */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.results-in {
  animation: fadeIn .3s ease-out;
}

/* ============ Print / Save-as-PDF view ============ */
/* Used by the Monthly Cash Flow Tracker's "Print / Save as PDF" button.
   Hides navigation, the disclaimer ribbon, forms, buttons, and ad slots;
   keeps the summary, entered line items, category breakdown, and the
   legal disclaimer for a clean printed record. Elements are opted in via
   the `no-print` class and the `#printHeader` block is print-only. */
#printHeader {
  display: none;
}
@media print {
  /* Printed pages are always light, regardless of on-screen theme — force
     every color variable back to its light value so dark-mode text isn't
     printed near-white on a forced-white page. */
  html.dark {
    --color-ink: #1F3A5F;
    --color-secondary: #3E6B6B;
    --color-secondaryDark: #2E5252;
    --color-accent: #B8874B;
    --color-success: #6B8F71;
    --color-caution: #B5563C;
    --color-textPrimary: #22262B;
    --color-textSecondary: #5B6570;
    --color-bgBase: #F7F6F3;
    --color-bgAlt: #EFEEEA;
    --color-surface: #FFFFFF;
    --color-borderC: #E4E1DA;
  }
  body { background: #fff !important; }
  .no-print { display: none !important; }
  #printHeader { display: block; }
  main { max-width: 100% !important; padding: 0 !important; }
  .shadow-card, .shadow-hero { box-shadow: none !important; }
}