/* ============================================================================
 * TapTheMap — Canonical Brand Palette
 * Created: August 22, 2026
 * Updated: August 24, 2026 — Batch 6 expansion (10 new variables)
 *
 * Single source of truth for all colors across admin and marketing pages.
 * Linked via <link rel="stylesheet" href="/css/brand.css"> in every template.
 *
 * Usage:  color: var(--color-text-secondary);
 *         background: var(--color-bg-surface);
 * ============================================================================ */
:root {
  /* ── Brand ─────────────────────────────────────────────────────────────── */
  --color-primary:         #1B3A5C;
  --color-brand-navy:      #0B3B5C;
  --color-teal:            #0C8080;
  --color-teal-dark:       #0d7377;   /* 5.62:1 vs white */
  --color-teal-bright:     #25CCCC;
  --color-teal-mid:        #00757A;
  /* ── Text ──────────────────────────────────────────────────────────────── */
  --color-text-dark:       #1A1A1A;
  --color-text-primary:    #2C3E50;
  --color-text-heading:    #333333;
  --color-text-charcoal:   #263238;
  --color-text-body:       #555555;
  --color-text-secondary:  #666666;
  --color-text-muted:      #737373;
  --color-text-placeholder:#6B6B6B;
  --color-text-subtle:     #6B7280;
  --color-text-mid:        #5D6D7E;
  --color-text-blue-gray:  #546E7A;
  /* ── Surfaces & Backgrounds ────────────────────────────────────────────── */
  --color-white:           #FFFFFF;
  --color-bg-warm:         #FAFAF8;
  --color-bg-surface:      #F5F5F4;
  --color-bg-subtle:       #F1F5F9;
  --color-bg-accent:       #E8F2FA;
  /* ── Borders ───────────────────────────────────────────────────────────── */
  --color-border:          #919191;   /* 3.15:1 vs white */
  --color-border-mid:      #8b8b8b;   /* 3.41:1 vs white */
  --color-border-light:    #949494;   /* 3.03:1 vs white */
  --color-border-subtle:   #878787;   /* 3.59:1 vs white */
  --color-border-input:    #8e8e8e;   /* 3.28:1 vs white */
  /* ── Accent: Blue ──────────────────────────────────────────────────────── */
  --color-blue-accent:     #1A6FA8;
  --color-blue-interactive:#2563EB;
  --color-blue-light:      #93C5FD;
  /* ── Accent: Other ─────────────────────────────────────────────────────── */
  --color-violet:          #7C3AED;
  --color-purple:          #6C3483;
  /* ── Status: Success ───────────────────────────────────────────────────── */
  --color-success:         #059669;
  --color-success-bg:      #ECFDF5;
  --color-success-bg-light:#D5F5E3;
  --color-green:           #16A34A;
  --color-green-dark:      #065F46;
  /* ── Status: Danger ────────────────────────────────────────────────────── */
  --color-danger:          #DC2626;
  --color-danger-bg:       #FEF2F2;
  /* ── Status: Warning ───────────────────────────────────────────────────── */
  --color-warning:         #FBBF24;
  --color-warning-text:    #92400E;
  --color-warning-bg:      #FEF9E7;
  --color-warning-bg-light:#FEF3C7;
}

/* WCAG 2.3.3: Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}