/* ===========================================================================
   Ashby Lumber — Color Tokens
   Heritage building-materials supplier. Greens carry structure; neutrals carry
   the long-form reading; gold + terracotta are rare, intentional accents.
   =========================================================================== */

:root {
  /* --- Brand greens (structure & hierarchy) --- */
  --ashby-green:    #223B20;  /* Primary backbone — headers, section bars, structure */
  --forest-mid:     #3A5A36;  /* Mid green — secondary structure, hover depth */
  --sage:           #6B8265;  /* Muted green — meta labels, quiet accents */
  --pale-sage:      #E8EDE6;  /* Tint — callout & alternating-row backgrounds */

  /* --- Blue Whale (sub-headers / callouts) --- */
  --blue-whale:     #04283E;

  /* --- Neutrals (the reading surface) --- */
  --ink:            #1A1A1A;  /* Body text */
  --slate-grey:     #5C5C5C;  /* Captions, secondary text */
  --light-grey:     #D1D0D0;  /* Borders, rules, dividers */
  --warm-white:     #FAFAF8;  /* Page background */
  --white:          #FFFFFF;

  /* --- Accents (used SPARINGLY) --- */
  --gold:           #F1C548;  /* CTAs, key callouts, URLs ONLY — never decorative/bg */
  --terracotta:     #E35525;  /* Warnings ONLY */

  /* ---------------------------------------------------------------------
     Semantic aliases — reference these in components, not the raw values.
     --------------------------------------------------------------------- */
  --surface-page:        var(--warm-white);
  --surface-card:        var(--white);
  --surface-callout:     var(--pale-sage);
  --surface-inverse:     var(--ashby-green);
  --surface-inverse-2:   var(--blue-whale);

  --text-heading:        var(--ashby-green);
  --text-subheading:     var(--blue-whale);
  --text-body:           var(--ink);
  --text-muted:          var(--slate-grey);
  --text-on-inverse:     var(--warm-white);
  --text-link:           var(--ashby-green);

  --border-default:      var(--light-grey);
  --border-strong:       var(--ashby-green);
  --bar-section:         var(--ashby-green);

  --accent-cta:          var(--gold);
  --accent-cta-text:     var(--ashby-green);
  --accent-warning:      var(--terracotta);

  --row-stripe:          var(--pale-sage);
  --focus-ring:          var(--forest-mid);
}