/* ==========================================================================
   tokens.css — Reefsea Homes design tokens (Phase 2, task 2.1)
   --------------------------------------------------------------------------
   Single source of truth for the documented brand identity (see
   docs/site-improvement-review-and-plan.md §2 "The soul").

   Loaded FIRST in every page head, before site.css, so these custom
   properties are available to any rule that opts in via var(). The 133 KB
   legacy site.css keeps its colour/size literals for now — wholesale
   var() rewiring is deliberately out of scope for this task. Only the
   Phase 2 modernization rules (15px base, AA body gray, brand-blue form
   button) reference these tokens today.
   ========================================================================== */

:root {
  /* --- Brand palette -------------------------------------------------- */
  --color-brand:        #008fd5; /* primary sky blue — buttons, accents   */
  --color-brand-hover:  #107aae; /* darker sky blue — hover/active state   */

  --color-navy:         #001542; /* darkest navy — copyright bar           */
  --color-navy-2:       #001c55; /* navy — footer / dark sections          */

  --color-charcoal:     #23323a; /* headings / dark UI text                */
  --color-gray:         #73848e; /* legacy warm gray (see text tokens)     */
  --color-gray-light:   #93a6b0; /* lighter warm gray — secondary UI       */

  /* De-facto plain-link colour. The site has rendered plain links this
     dark blue for years (WP theme-options dump). Unification to the brand
     blue (--color-brand) is a client-noticeable change and is PENDING
     CLIENT APPROVAL — do not swap links to --color-brand without sign-off. */
  --color-link:         #003399;

  /* --- Text colours (WCAG AA) ---------------------------------------- */
  /* Body copy needs >= 4.5:1 on white. The legacy #73848e is 3.87:1 and
     fails AA. --color-text-body is the least darkening of #73848e that
     reaches >= 4.6:1 (4.62:1) while preserving its hue/saturation. Apply
     to body-copy-sized text. Large decorative text (>= 24px) is AA Large
     at 3:1 and may keep the original gray via --color-text-muted-large. */
  --color-text-body:         #687781; /* 4.62:1 on #fff — body copy        */
  --color-text-muted-large:  #73848e; /* original gray — >= 24px decorative */

  /* --- Type ----------------------------------------------------------- */
  --font-body:    'Open Sans', Helvetica, 'Segoe UI', Arial, sans-serif;
  --font-display: 'Staccato222BTRegular', cursive; /* page-heading flourish */

  --font-size-base:   15px; /* modernized base body size (was 13/14px)     */
  --line-height-base: 1.6;  /* unitless — keeps vertical rhythm at 15px     */

  /* --- Layout: Bootstrap-3 boxed content widths ---------------------- */
  --content-width-sm: 750px;
  --content-width-md: 970px;
  --content-width-lg: 1170px;
}