/* ==========================================================================
   COODU TRUST — Design Tokens
   Single source of truth for color, type, space, radius, shadow, motion.
   No hard-coded hex/px should live outside this file.
   Convention names per the shared build contract; extras the spec needs
   are grouped and commented.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Brand greens ----------------------------------------------------- */
  --color-primary:      #1e7e34; /* brand green: buttons, links, active nav, chips, stat nums */
  --color-primary-dark: #155d27; /* primary hover/press, CTA gradient dark end */
  --color-deep:         #11371b; /* footer background */
  --color-dark-band:    #161d18; /* "one planet" dark stats band */
  --color-dark-menu:    #0f2417; /* mega-menu showcase backdrop */

  /* ---- Action accent (Donate / CTA only) -------------------------------- */
  --color-accent:       #e8590c;
  --color-accent-dark:  #c2410c;

  /* ---- Amber (three distinct, accessibility-separated roles) ------------ */
  --color-amber:        #f4a300; /* UI: tags, dots, active-nav underline, dark-band numbers */
  --color-amber-text:   #c47f00; /* TEXT on white only (passes contrast) */
  --color-amber-light:  #f6c453; /* LABEL on dark only (hero/CTA eyebrow) */

  /* ---- Surfaces & borders ----------------------------------------------- */
  --surface:            #ffffff; /* page bg, cards, header */
  --surface-alt:        #f6f8f6; /* banded sections, image-slot bg */
  --surface-tint:       #f0f6f1; /* green icon-chip bg, drawer active row */
  --surface-tint-orange:#fdebd6; /* orange icon-chip bg (Women / income) */
  --border:             #e2e8e2; /* card borders, hairlines, input borders */
  --border-soft:        #eef1ee; /* inner dividers, faint section rules */

  /* ---- Text ------------------------------------------------------------- */
  --text-strong:        #1a1f1a; /* headings (near-black, never #000) */
  --text-body:          #3d433d; /* body copy + default body color */
  --text-muted:         #6b726b; /* captions, meta, labels */

  /* ---- On-dark text + dividers ------------------------------------------ */
  --color-on-dark:      #ffffff;
  --on-dark-80:         rgba(255,255,255,.9);
  --on-dark-60:         rgba(255,255,255,.72);
  --border-on-dark:     rgba(255,255,255,.6);
  --border-on-dark-soft:rgba(255,255,255,.1);
  --scrim:              rgba(8,18,11,.55); /* drawer backdrop */

  /* ---- Footer palette --------------------------------------------------- */
  --footer-text:        #cfe3d4;
  --footer-text-muted:  #a8c4af;
  --footer-text-faint:  #8fae97;
  --footer-hairline:    rgba(255,255,255,.12);
  --footer-social-bg:   rgba(255,255,255,.08);

  /* ---- Status (forms) --------------------------------------------------- */
  --color-success:      #2e7d32;
  --color-error:        #c62828;

  /* ---- Gradients & textures (decorative; used by hero/CTA bands) -------- */
  --grad-hero:          linear-gradient(135deg, #2c5a3c, #12301e);
  --grad-hero-mobile:   linear-gradient(160deg, #2c5a3c, #10271a);
  --grad-cta:           linear-gradient(135deg, #1e7e34, #13311f);
  --overlay-hero:       linear-gradient(90deg, rgba(8,26,15,.9) 0%, rgba(8,26,15,.62) 46%, rgba(8,26,15,.18) 100%);
  --overlay-hero-mobile:linear-gradient(180deg, rgba(8,26,15,.5), rgba(8,26,15,.82));
  --texture-weave:      repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 16px, rgba(0,0,0,.05) 16px 32px);
  --texture-weave-light:repeating-linear-gradient(135deg, rgba(30,126,52,.04) 0 14px, rgba(30,126,52,.075) 14px 28px);

  /* Decorative Lucide "image" glyph for empty image slots (CSS mask) */
  --icon-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20width='18'%20height='18'%20x='3'%20y='3'%20rx='2'%20ry='2'/%3E%3Ccircle%20cx='9'%20cy='9'%20r='2'/%3E%3Cpath%20d='m21%2015-3.086-3.086a2%202%200%200%200-2.828%200L6%2021'/%3E%3C/svg%3E");

  /* ---- Typography ------------------------------------------------------- */
  --font-display: "Oswald", system-ui, sans-serif;            /* headings + labels + nav + CTA */
  --font-body:    "Source Sans 3", system-ui, sans-serif;     /* body copy, footer */

  /* Fluid type scale (clamp: mobile -> desktop) */
  --fs-h1:      clamp(2rem, 1.2rem + 3.6vw, 3.3rem);
  --fs-h2:      clamp(1.6rem, 1.25rem + 1.7vw, 2.1rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + .8vw, 1.5rem);
  --fs-body:    clamp(1rem, .97rem + .2vw, 1.0625rem);
  --fs-small:   .875rem;
  --fs-eyebrow: clamp(.6875rem, .62rem + .3vw, .8125rem);
  --fs-micro:   .6875rem;
  --fs-stat:    clamp(1.5rem, 1.1rem + 1.8vw, 2rem);

  /* Letter-spacing */
  --ls-eyebrow:  .12em;
  --ls-nav:      .04em;
  --ls-label:    .08em;
  --ls-wordmark: .02em;
  --ls-tagline:  .13em;

  /* ---- Spacing (8px base) ----------------------------------------------- */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --s7: 96px;

  /* Layout widths */
  --maxw:      1140px;
  --maxw-text: 720px;

  /* Chrome heights */
  --header-h-desktop: 72px;
  --header-h-mobile:  56px;
  --drawer-w:         min(328px, 88vw);

  /* ---- Radius ----------------------------------------------------------- */
  --radius-btn:   8px;
  --radius-card:  12px;
  --radius-icon:  12px;
  --radius-frame: 14px;
  --radius-pill:  999px;

  /* ---- Shadows ---------------------------------------------------------- */
  --shadow-1:      0 2px 8px rgba(17,40,26,.06);
  --shadow-2:      0 12px 30px rgba(17,40,26,.12);
  --shadow-band:   0 14px 34px rgba(17,40,26,.09);
  --shadow-float:  0 10px 28px rgba(17,40,26,.1);
  --shadow-donate: 0 2px 8px rgba(232,89,12,.28);
  --shadow-drawer: -12px 0 40px rgba(0,0,0,.25);
  --shadow-menu:   0 20px 50px rgba(0,0,0,.3);

  /* ---- Motion ----------------------------------------------------------- */
  --dur:     180ms;
  --ease-fn: cubic-bezier(.2,.6,.2,1);
  --ease:    180ms cubic-bezier(.2,.6,.2,1); /* shorthand: use as `transition: prop var(--ease)` */

  /* ---- Z-index ---------------------------------------------------------- */
  --z-mega:   1100;
  --z-header: 1000;
  --z-drawer: 2000;
  --z-skip:   3000;

  /* ---- Breakpoints (reference only; CSS media queries use literals) ------ */
  --bp-sm: 600px;  /* mobile < 600 */
  --bp-md: 900px;  /* tablet 600-1199 */
  --bp-lg: 1200px; /* desktop >= 1200 */
}