/* ============================================================
   US-Africa Chamber of Commerce — Atlanta Chapter
   Design tokens. Brand colors sampled directly from the
   official logo (assets/logo.png), not assumed.
   ============================================================ */
:root {
  /* --- Raw brand palette (from logo) --- */
  --navy:       #00182C; /* Atlanta skyline silhouette — deepest */
  --pine:       #226247; /* "Africa" + "Chamber of Commerce" wordmark */
  --pine-deep:  #16442F; /* darkened pine for hovers / gradients */
  --emerald:    #027043; /* emblem ring + circuit-brain traces */
  --gold:       #FDC30B; /* gradient ring + stars */
  --gold-deep:  #E39A0B; /* amber, for gradients / hovers */
  --crimson:    #A7150B; /* "US" + "ATLANTA" wordmark */
  --sky:        #33C5FB; /* sky behind skyline — micro-accent only */

  /* --- Neutrals / ground --- */
  --paper:      #FFFFFF;
  --paper-2:    #F4F7F4; /* faint green-grey section band */
  --paper-3:    #ECF1ED;
  --line:       #E1E7E2; /* hairline borders */
  --ink:        #0F1E16; /* warm green-black body text */
  --muted:      #56685E; /* secondary text */

  /* --- Semantic aliases (use these in components) --- */
  --brand:        var(--pine);
  --brand-strong: var(--navy);
  --accent:       var(--gold);
  --accent-deep:  var(--gold-deep);
  --emphasis:     var(--crimson);
  --bg:           var(--paper);
  --bg-alt:       var(--paper-2);
  --text:         var(--ink);
  --text-soft:    var(--muted);

  /* --- Form --- */
  --radius:     14px;
  --radius-sm:  8px;
  --radius-pill: 999px;
  --shadow-sm:  0 1px 2px rgba(0,24,44,.06), 0 1px 3px rgba(0,24,44,.10);
  --shadow-md:  0 10px 30px -12px rgba(0,24,44,.28);
  --maxw:       1160px;
}