/* ==========================================================================
   RidgeRoofer — Design tokens
   --------------------------------------------------------------------------
   Single source of truth for colour. Enqueued BEFORE main.css so every
   component can resolve these variables.

   Two-colour system:
     Ridge Charcoal  — the dominant colour. Structure, type, weight.
     Ember           — the accent. Capped at ~10% of any viewport.
   Everything else is connective tissue (neutrals), not "colour".

   Do not add hex values to any other stylesheet. If a component needs a
   colour, it comes from here.
   ========================================================================== */

:root {
  /* --- The two colours ------------------------------------------------- */
  --rr-charcoal:     #1B2028;   /* nav, footer, headings, primary surfaces */
  --rr-charcoal-alt: #2C3138;   /* body copy; secondary dark surface       */
  --rr-ember:        #C64A1E;   /* CTAs, step/stat numerals, accents       */
  --rr-ember-hover:  #A83C15;   /* CTA hover / pressed                     */

  /* --- Neutrals -------------------------------------------------------- */
  --rr-white:        #FFFFFF;   /* main background                         */
  --rr-paper:        #FAF7F3;   /* alt section background, cards           */
  --rr-hairline:     #E8E5E1;   /* borders, dividers                       */
  --rr-muted:        #6B7280;   /* meta text, form hints                   */

  /* --- Derived: text on charcoal surfaces ------------------------------
     The palette above has no on-dark text colour, but the system puts
     charcoal behind the header, footer and pre-footer CTA. --rr-muted on
     charcoal is only 3.4:1 (AA fail), so these two neutrals are pulled from
     the charcoal family to cover it:
       --rr-on-dark        10.2:1 on charcoal — body copy on dark
       --rr-on-dark-muted   6.2:1 on charcoal — meta/labels on dark
     -------------------------------------------------------------------- */
  --rr-on-dark:       #C9CCD1;
  --rr-on-dark-muted: #9AA0A8;

  /* --- Derived: Ember as text -----------------------------------------
     Ember on white is 4.77:1 (AA pass). Ember on --rr-paper is 4.47:1,
     which misses AA for normal text by a hair. Link text therefore reads
     from --rr-link, which darkens to --rr-ember-hover (5.9:1 on paper) on
     paper-backed surfaces. Fills, borders and oversized numerals keep the
     full-strength Ember everywhere — they are not normal-size text.
     -------------------------------------------------------------------- */
  --rr-link:       var(--rr-ember);
  --rr-link-hover: var(--rr-ember-hover);

  /* --- Derived: translucent charcoal for shadows ----------------------- */
  --rr-shadow-sm: 0 1px 3px  rgba(27, 32, 40, 0.07);
  --rr-shadow-md: 0 4px 16px rgba(27, 32, 40, 0.10);
  --rr-shadow-lg: 0 12px 32px rgba(27, 32, 40, 0.14);
}

/* Paper-backed surfaces darken link text to keep AA. Scoped by custom
   property rather than by rewriting every link rule. */
.section--paper,
.section--tint,
.card,
.step,
.glance,
.table-wrap,
.callout {
  --rr-link: var(--rr-ember-hover);
}

/* Charcoal-backed surfaces: links and body copy switch to the on-dark
   neutrals. Ember on charcoal is 3.4:1 and cannot carry normal-size text. */
.section--dark,
.site-footer,
.cta-band,
.hero,
.state-hero,
.loc-hero,
.page-hero--dark {
  --rr-link:       var(--rr-white);
  --rr-link-hover: var(--rr-white);
}