/*
 * ============================================================
 * DESIGN TOKENS  —  variables.css
 * ============================================================
 * This is the single source of truth for the entire site's
 * visual language. Change a value here and it updates every
 * component that references it — colours, fonts, spacing.
 *
 * Quick-edit guide
 * ----------------
 * Wrong shade of green?   →  --rg-green-dark / --rg-green-lime
 * Background feels off?   →  --rg-bg
 * Font not right?         →  --rg-font-display / --rg-font-body
 * Cards too wide?         →  --rg-max
 * Buttons too round?      →  --rg-radius-btn
 * ============================================================
 */

:root {

  /* --- Brand greens ---------------------------------------- */
  --rg-green-dark:    #1a3d1a;   /* "Re", nav title, dark elements  */
  --rg-green-lime:    #4a8c1e;   /* "Green", eyebrows, tags         */
  --rg-green-mid:     #3a6b35;   /* scroll progress bar             */
  --rg-gold:          #C9A227;   /* impact section accent           */

  /* --- Text colours ---------------------------------------- */
  --rg-charcoal:      #2d3028;   /* headings, nav links             */
  --rg-body:          #4a5240;   /* body paragraphs                 */
  --rg-muted:         #6b7260;   /* dates, captions, meta           */
  --rg-invert:        #ffffff;   /* text on dark backgrounds        */

  /* --- Surface colours ------------------------------------- */
  --rg-bg:            #F0EBE0;   /* warm paper — page background    */
  --rg-card:          #FAFAF7;   /* post cards                      */
  --rg-impact-bg:     #2B4C34;   /* impact stats section            */

  /* --- Typography ------------------------------------------ */
  --rg-font-display:  'DM Serif Display', serif;   /* headings     */
  --rg-font-body:     'DM Sans', sans-serif;        /* everything else */

  /* --- Layout ---------------------------------------------- */
  --rg-max:           1160px;    /* max content width               */

  /* --- Motion ---------------------------------------------- */
  --rg-ease:          0.22s ease;
  --rg-ease-reveal:   cubic-bezier(0.16, 1, 0.3, 1);

  /* --- UI -------------------------------------------------- */
  --rg-radius-card:   10px;
  --rg-radius-btn:    4px;


  /* =========================================================
   * IDENTITY SYSTEM — skyline motif + wave dividers
   * =========================================================
   * Shared values for the recurring Springfield skyline
   * silhouette and the curved "wave" transitions between
   * homepage sections. Used by skyline.css and wave.css.
   *
   * Quick-edit guide
   * ----------------
   * Skyline too visible/faint?  →  --rg-skyline-opacity-*
   * Wave too tall/shallow?      →  --rg-wave-height
   * Motion feels off?           →  --rg-ease-wave
   * --------------------------------------------------------- */

  /* Skyline silhouette — tuned per background so it never
     fights with text or cards sitting on top of it */
  --rg-skyline-opacity-light:  0.06;   /* on --rg-bg / --rg-card   */
  --rg-skyline-opacity-dark:   0.20;   /* on dark green bands */
  --rg-skyline-color-light:    var(--rg-green-dark);
  --rg-skyline-color-dark:     var(--rg-invert);

  /* Wave dividers — one shared height/curve so every seam
     between sections reads as part of the same "river" */
  --rg-wave-height:   72px;
  --rg-wave-height-sm:44px;   /* used under 640px viewports */
  --rg-ease-wave:     cubic-bezier(0.65, 0, 0.35, 1);

}