/* ==========================================================================
   Raspberry LLC — THEME FILE. Every color on the site comes from these custom properties
   (CSS, inline SVG logo, and illustrations). Client-approved palette: navy + soft teal + white.
   To change colors, edit the :root block below. Archived alternatives: archive/theme-variants-unused.css.
   Contrast (checked with WCAG formula, see docs/README): body text ≥ 15:1, muted text ≥ 7:1,
   white on primary ≥ 7.7:1, link/accent-strong on background ≥ 6.3:1, on-accent text on accent ≥ 7:1.
   Accent (teal / gold / yellow) is used ONLY for decoration or behind dark text, never as text.
   ========================================================================== */

/* Navy + soft teal + white (client-approved Oct 31, 2026) */
:root {
  --brand-primary: #12305A;        /* navy: header text, headings, primary buttons */
  --brand-primary-dark: #0B2140;   /* footer background, hover */
  --brand-accent: #7FCFC7;         /* soft teal: decoration, light buttons (dark text) */
  --brand-accent-strong: #0B6B66;  /* deep teal: links, eyebrows, secondary buttons */
  --brand-tint: #E3F4F1;           /* soft section background */
  --brand-tint-2: #CBEAE5;
  --brand-surface: #FFFFFF;        /* cards */
  --brand-on-primary: #FFFFFF;     /* text on primary */
  --brand-on-accent: #0B2140;      /* text on accent */
  --page-bg: #FFFFFF;
  --text: #14233B;
  --text-muted: #3D4B5C;
  --border: #C9D3DE;
  --focus: #0B6B66;
  --placeholder-bg: #FFF4CC; --placeholder-text: #5C4300; --placeholder-border: #E0B800;
  --warn-bg: #FFF4E5; --warn-border: #B45309; --warn-text: #5A2A00;
  --error: #B42318;
}

/* SVG color utility classes (logo + illustrations follow the theme) */
.f-primary { fill: var(--brand-primary); } .f-accent { fill: var(--brand-accent); }
.f-accent-strong { fill: var(--brand-accent-strong); } .f-tint { fill: var(--brand-tint); }
.f-surface { fill: var(--brand-surface); } .f-on-primary { fill: var(--brand-on-primary); }
.s-primary { stroke: var(--brand-primary); }
.sc-tint { stop-color: var(--brand-tint); } .sc-tint-2 { stop-color: var(--brand-tint-2); }