/* ==========================================================================
   C&S Moving — Design Tokens
   --------------------------------------------------------------------------
   The single source of truth for the brand. Every color, type family, and
   spacing value in the site references a variable defined here. Change a value
   in this file and it updates everywhere it's used.

   This file is the foundation layer: set once, rarely touched. base.css and
   extracted.css reference these tokens; page content sits on top of both.
   ========================================================================== */

:root {

  /* ---- Brand color ------------------------------------------------------ */
  --cs-green:        #1A4B2E;   /* primary green — headings, dark sections   */
  --cs-green-mid:    #2E6B45;   /* mid green — links, accents                */
  --cs-green-dark:   #0E3520;   /* deepest green — footer                    */
  --cs-amber:        #F5A623;   /* amber — primary CTA, highlights           */
  --cs-amber-dark:   #E08E0B;   /* amber hover                               */
  --cs-cream:        #F8F6F1;   /* cream — page + light section background   */
  --cs-ink:          #1C1C1C;   /* near-black body text                      */

  /* ---- Neutrals & support ---------------------------------------------- */
  --cs-white:        #FFFFFF;
  --cs-mint:         #E9F0EA;   /* pale green — trust bar, stats background   */
  --cs-beige:        #EFECE4;   /* warm grey/beige — panels on white sections */
  --cs-body:         #4A463E;   /* soft body text on light                   */
  --cs-muted:        #6F6A5F;   /* muted labels, secondary text              */
  --cs-muted-2:      #9A9384;   /* faint captions                            */
  --cs-ink-soft:     #3A3730;   /* hero subhead                              */
  --cs-muted-3:      #8A8372;   /* faintest caption                          */

  /* ---- Lines & borders -------------------------------------------------- */
  --cs-line:         #EFE9DD;   /* default hairline on cream                 */
  --cs-line-green:   #DCE5DA;   /* hairline on mint/green-tinted areas       */
  --cs-line-input:   #E4DFD4;   /* form field borders                        */
  --cs-line-soft:    #D8E2D4;
  --cs-line-soft-2:  #C9D4C4;
  --cs-line-cream:   #F1ECE1;

  /* ---- Amber tints (badges, soft fills) --------------------------------- */
  --cs-amber-bg:     #FBF1DE;
  --cs-amber-line:   #F0DDB8;
  --cs-tint-green:   #F1F4EF;
  --cs-cream-2:      #C9CFC2;

  /* ---- Alpha overlays (used on dark green / imagery) -------------------- */
  --cs-cream-82:     rgba(248, 246, 241, 0.82);
  --cs-cream-72:     rgba(248, 246, 241, 0.72);
  --cs-cream-80:     rgba(248, 246, 241, 0.80);
  --cs-cream-60:     rgba(248, 246, 241, 0.60);
  --cs-cream-50:     rgba(248, 246, 241, 0.50);
  --cs-white-12:     rgba(255, 255, 255, 0.12);
  --cs-white-08:     rgba(255, 255, 255, 0.08);
  --cs-white-05:     rgba(255, 255, 255, 0.05);
  --cs-amber-16:     rgba(245, 166, 35, 0.16);
  --cs-amber-18:     rgba(245, 166, 35, 0.18);
  --cs-green-08:     rgba(26, 75, 46, 0.08);

  /* ---- Type families ---------------------------------------------------- */
  --cs-font-display: 'Archivo', sans-serif;   /* headings                    */
  --cs-font-body:    'Work Sans', sans-serif; /* body, UI                    */
  --cs-font-script:  'Caveat', cursive;       /* eyebrows, accents           */

  /* ---- Type scale ------------------------------------------------------- */
  --cs-fs-hero:      56px;
  --cs-fs-h1:        50px;
  --cs-fs-h2:        40px;
  --cs-fs-h3:        34px;
  --cs-fs-h4:        22px;
  --cs-fs-lead:      19px;
  --cs-fs-body:      16px;
  --cs-fs-sm:        14px;
  --cs-fs-xs:        13px;
  --cs-fs-eyebrow:   12px;

  /* ---- Spacing rhythm --------------------------------------------------- */
  --cs-space-section:  72px;   /* vertical padding on a standard section     */
  --cs-space-lg:       48px;
  --cs-space-md:       32px;
  --cs-space:          24px;   /* base gutter                                */
  --cs-space-sm:       16px;
  --cs-space-xs:       12px;

  /* ---- Structure -------------------------------------------------------- */
  --cs-container:      1200px; /* max content width                         */
  --cs-radius:         14px;   /* card / panel corner                       */
  --cs-radius-sm:      10px;   /* button corner                             */
  --cs-shadow-card:    0 24px 48px rgba(0, 0, 0, 0.22);
}