/* ============================================================
   Empowered Women Alliance — Color Tokens
   Brand: deep aubergine plum + metallic gold on warm cream.
   ============================================================ */

:root {
  /* --- Plum / Aubergine (primary brand dark) --- */
  --plum-950: #240C1F;
  --plum-900: #2B0F25;
  --plum-800: #3A1631; /* base brand plum — hero & footer */
  --plum-700: #4D2241;
  --plum-600: #5E2E50;
  --plum-500: #743D63;
  --plum-300: #A57E97;
  --plum-100: #E6DAE1;

  /* --- Gold / Ochre (primary accent) --- */
  --gold-800: #8A621F;
  --gold-700: #A6772F;
  --gold-600: #C49245; /* base brand gold — buttons & accents */
  --gold-500: #D0A256;
  --gold-400: #D9B36F;
  --gold-300: #E7D2A6;
  --gold-100: #F5EAD3;

  /* --- Warm neutrals --- */
  --cream-50:  #FCFBFA;
  --cream-100: #F8F7F5; /* page background */
  --cream-200: #F1EEEA;
  --blush-100: #F6E9E5; /* soft pink section */
  --blush-200: #EFD9D2;

  --ink-900: #2B1A26; /* warm near-black text */
  --ink-700: #4A3A44;
  --ink-500: #6E5C66; /* muted body text */
  --ink-400: #8C7B85;
  --line-200: #E5DCDF; /* hairline borders */
  --line-300: #D6C9CE;

  --white: #FFFFFF;
  --black: #1A0F16;

  /* --- Semantic / status --- */
  --success: #4E7A52;
  --warning: #C49245;
  --error:   #A83A4B;
  --info:    #5E2E50;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */
  --bg-page:        var(--cream-100);
  --bg-canvas:      var(--white);
  --bg-inverse:     var(--plum-800);
  --bg-soft:        var(--blush-100);
  --surface-card:   var(--white);
  --surface-raised: var(--cream-50);

  --text-heading:   var(--plum-800);
  --text-body:      var(--ink-500);
  --text-strong:    var(--ink-900);
  --text-muted:     var(--ink-400);
  --text-on-dark:   var(--white);
  --text-on-dark-muted: rgba(255,255,255,0.72);
  --text-accent:    var(--gold-700);

  --brand-primary:  var(--plum-800);
  --brand-accent:   var(--gold-600);

  --border-subtle:  var(--line-200);
  --border-strong:  var(--line-300);
  --border-accent:  var(--gold-600);

  --focus-ring:     var(--gold-600);
}