/* assets/css/_variables.css
   Design tokens — loaded globally (before all other CSS)
   ================================================================ */
:root {
    /* ── Brand greens ── */
    --g:        #146653;
    --g-dark:   #0d4a3b;
    --g-mid:    #1a7a63;
    --g-light:  #1f9478;
    --g-pale:   #e8f5f1;
    --g-muted:  #b3d9d0;

    /* ── Brand gold ── */
    --gold:      #c9a84c;   /* main gold */
    --gold-lt:   #f0d895;   /* pale gold — text accents, headings */
    --gold-warm: #e2c47a;   /* warm hover gold — dark backgrounds */

    /* ── Neutrals ── */
    --cream:    #faf8f4;
    --cream-2:  #f3f0ea;
    --stone:    #e8e3da;
    --charcoal: #1c2621;
    --ink:      #2d3f3a;
    --muted:    #6b8077;
    --white:    #ffffff;

    /* ── Shadows ── */
    --shadow-sm:  0 2px 12px rgba(20,102,83,.08);
    --shadow-md:  0 8px 32px rgba(20,102,83,.12);
    --shadow-lg:  0 20px 64px rgba(20,102,83,.16);

    /* ── Border radii ── */
    --r:    10px;
    --r-lg: 18px;
    --r-xl: 28px;

    /* ── Transition ── */
    --transition: all .22s cubic-bezier(.4,0,.2,1);

    /* ── tg-prefixed aliases — reference base tokens (single source of truth) ── */
    --tg-main:      var(--g);
    --tg-accent:    #5aaa2a;
    --tg-accent-dk: #4a9a22;   /* darker accent — hover states */
    --tg-gold:      var(--gold);
    --tg-gold-lt:   var(--gold-warm);
    --tg-dark:      var(--g-dark);
    --tg-white:     var(--white);
    --tg-charcoal:  var(--charcoal);
    --tg-muted:     var(--muted);
    --tg-stone:     var(--stone);

    /* ── Layout ── */
    --tg-max-w:    1280px;
    --tg-header-h: 68px;
    --tg-topbar-h: 36px;

    /* ── Header z-index stack ── */
    --hdr-z-ovl:  140;
    --hdr-z-hdr:  150;
    --hdr-z-top:  155;
    --hdr-z-drop: 160;
    --hdr-z-mob:  170;

    /* ── Header layout ── */
    --hdr-max-w:     1280px;
    --hdr-px:        40px;
    --hdr-nav-h:     72px;
    --hdr-top-h:     36px;
    --hdr-ticker-h:  36px;

    /* ── Header colors — light theme ── */
    --hdr-text:      #1c2621;
    --hdr-sub:       #3d5550;
    --hdr-gold:      #c9a84c;
    --hdr-accent:    #5aaa2a;
    --hdr-accent-dk: #4a9a22;
    --hdr-pale:      rgba(90,170,42,.08);
    --hdr-sub-bg:    #f5faf5;
    --hdr-row-sep:   rgba(0,0,0,.07);
    --hdr-divider:   rgba(0,0,0,.1);

    /* ── Font ── */
    --tg-font-main: 'Google Sans', sans-serif;
    --tg-trans:     var(--transition);

    /* ── Footer ── */
    --footer-bg:    #0a1a15;
    --footer-green: #105239;
}