/* turfRad ROI calculator — design tokens.
 *
 * [CONTENT] This is the safe place to adjust the look: colours, fonts, spacing, radii.
 * These variables are used by ui.css (the website) and by the PDF report, so changing a
 * value here updates both. Sample exact brand values from turfrad.com when finalising.
 */

:root {
  /* Brand colours */
  --brand-blue: #2b83c4;         /* primary / interactive: buttons, slider, links */
  --brand-blue-dark: #1f6aa3;    /* hover / pressed */
  --brand-cyan: #14a5cd;         /* logo accent */
  --money: #8a6d3b;              /* the calculator's signature gold for money values */

  /* Neutrals */
  --ink: #2f3437;                /* near-black charcoal headings */
  --text: #3f464b;               /* body text */
  --muted: #6b7280;              /* small helper text */
  --line: #d9dde1;               /* input borders / dividers */
  --bg: #ffffff;                 /* page background */
  --surface: #ffffff;            /* cards / inputs */

  /* Callout (the "SUCCESS STORY" style box) */
  --callout-bg: #eaf4fb;
  --callout-border: var(--brand-blue);
  --callout-label: var(--brand-blue);

  /* Feedback */
  --required: #d64545;           /* required-field asterisk */
  --good: #2f8f5b;
  --warn: #b9822a;

  /* Typography */
  --font-sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica,
    Arial, sans-serif;
  --h1-size: 2.5rem;
  --section-size: 1.35rem;

  /* Shape & spacing */
  --radius: 10px;
  --radius-lg: 14px;
  --gap: 1.25rem;
  --maxw: 880px;

  --shadow-sm: 0 1px 2px rgba(20, 30, 40, 0.06);
  --shadow-md: 0 6px 24px rgba(20, 30, 40, 0.08);
}