/**
 * Giving Connect — Palette
 * Color custom properties and utility classes.
 * Mirror of gconnect-web light.theme.ts values.
 */

/* ─── Custom Properties ─────────────────────────────────────────────────────── */
:root {
  /* Primary — Emerald Green */
  --color-primary:       #2E7D5B;
  --color-primary-light: #57977B;
  --color-primary-dark:  #1A3329;

  /* Secondary — Bold Gold */
  --color-secondary:       #D4AF37;
  --color-secondary-light: #E2C775;

  /* Semantic */
  --color-error:   #8A2F1C;
  --color-warning: #F2A900;
  --color-info:    #2C6FA3;
  --color-success: #22C55E;

  /* Backgrounds */
  --color-bg:    #FDFCFB;
  --color-paper: #FFFFFF;
  --color-muted: #F5F2EF;

  /* Text */
  --color-text-primary:   #1A3329;
  --color-text-secondary: #455A64;
  --color-text-disabled:  rgba(26, 51, 41, 0.38);

  /* Borders */
  --color-divider: #EBE6DE;

  /* Interaction */
  --color-hover:    rgba(46, 125, 91, 0.06);
  --color-selected: rgba(46, 125, 91, 0.12);
}

/* ─── Background utilities ───────────────────────────────────────────────────── */
.bg-primary       { background-color: var(--color-primary); }
.bg-primary-light { background-color: var(--color-primary-light); }
.bg-primary-dark  { background-color: var(--color-primary-dark); }
.bg-secondary     { background-color: var(--color-secondary); }
.bg-white         { background-color: var(--color-paper); }
.bg-light         { background-color: var(--color-bg); }
.bg-muted         { background-color: var(--color-muted); }

/* ─── Text color utilities ───────────────────────────────────────────────────── */
.text-primary     { color: var(--color-primary); }
.text-secondary   { color: var(--color-text-secondary); }
.text-white       { color: #FFFFFF; }
.text-dark        { color: var(--color-text-primary); }
.text-muted       { color: var(--color-text-secondary); }
.text-gold        { color: var(--color-secondary); }
.text-error       { color: var(--color-error); }

/* ─── Border color utilities ─────────────────────────────────────────────────── */
.border-primary   { border-color: var(--color-primary); }
.border-secondary { border-color: var(--color-secondary); }
.border-divider   { border-color: var(--color-divider); }