/* Activate Faith Group — Color tokens
   Brand identity: a charcoal wordmark with a flowing rainbow ribbon.
   Four community pillars each own a color:
     Faith = green · Education = sky · Health = yellow · Social = coral
   Palette is warm, optimistic and human — soft yet saturated. */

:root {
  /* ---- Brand pillar colors (ribbon) ---- */
  --afg-green:  #7FBFA3;   /* Faith     */
  --afg-sky:    #5FCDEC;   /* Education */
  --afg-yellow: #FBE04A;   /* Health    */
  --afg-coral:  #EF7A7A;   /* Social    */
  /* Extended ribbon accents */
  --afg-orange: #F3A24C;
  --afg-teal:   #4FB6AE;

  /* Tints (for soft fills / backgrounds) */
  --afg-green-tint:  #E7F3ED;
  --afg-sky-tint:    #E2F6FC;
  --afg-yellow-tint: #FEF8D6;
  --afg-coral-tint:  #FCE9E9;
  --afg-orange-tint: #FDEEDB;
  --afg-teal-tint:   #E1F2F0;

  /* Deeper shades (text-safe on tints, hover states) */
  --afg-green-deep:  #4E9277;
  --afg-sky-deep:    #2E97BC;
  --afg-yellow-deep: #B89400;
  --afg-coral-deep:  #D24E4E;

  /* ---- Neutrals (warm-gray, anchored on the wordmark charcoal) ---- */
  --ink-900: #2A2A2D;   /* near-black headings */
  --ink-800: #3E3E42;   /* wordmark charcoal — primary text */
  --ink-700: #55555A;
  --ink-600: #6E6E74;   /* secondary text */
  --ink-500: #8A8A90;   /* muted / placeholder */
  --ink-400: #ABABB1;
  --ink-300: #CFCFD3;   /* borders strong */
  --ink-200: #E4E4E6;   /* borders / dividers */
  --ink-100: #EFEFF0;   /* hairlines / track */
  --paper:   #FAFAF7;   /* warm off-white app background */
  --surface: #FFFFFF;   /* cards / sheets */

  /* ---- Semantic aliases ---- */
  --brand:            var(--afg-green);
  --brand-deep:       var(--afg-green-deep);
  --accent:           var(--afg-coral);

  --text-strong:      var(--ink-900);
  --text-body:        var(--ink-800);
  --text-muted:       var(--ink-600);
  --text-subtle:      var(--ink-500);
  --text-on-brand:    #1F3A30;   /* charcoal-green for legibility on pastel brand */
  --text-on-dark:     #FAFAF7;

  --bg-page:          var(--paper);
  --surface-card:     var(--surface);
  --surface-sunken:   #F2F2EE;
  --surface-inverse:  var(--ink-900);

  --border-subtle:    var(--ink-200);
  --border-default:   var(--ink-300);
  --border-strong:    var(--ink-800);

  --focus-ring:       var(--afg-sky-deep);

  /* Status (mapped onto brand palette where possible) */
  --success:          var(--afg-green-deep);
  --success-tint:     var(--afg-green-tint);
  --warning:          var(--afg-orange);
  --warning-tint:     var(--afg-orange-tint);
  --danger:           var(--afg-coral-deep);
  --danger-tint:      var(--afg-coral-tint);
  --info:             var(--afg-sky-deep);
  --info-tint:        var(--afg-sky-tint);
}