/**
 * IamCarla brand palette — single source for #10b981 (emerald-500) and shades.
 * Linked first in base.html so all app CSS and inline var() usages stay aligned.
 */
:root {
  --brand-green: #10b981;
  --brand-green-hover: #059669;
  --brand-green-strong: #047857;
  --brand-green-ink: #065f46;
  --brand-green-ink-deep: #064e3b;
  --brand-green-50: #ecfdf5;
  --brand-green-100: #d1fae5;
  --brand-green-200: #a7f3d0;
  --brand-green-300: #6ee7b7;
  --brand-green-400: #34d399;
  --brand-green-rgb: 16, 185, 129;
  --brand-green-surface: color-mix(in srgb, var(--brand-green) 4%, #ffffff);
  --brand-green-surface-2: color-mix(in srgb, var(--brand-green) 8%, #f8fafc);

  /* Semantic aliases (composed from shades above — no extra hex literals) */
  --brand-green-pill-bg: var(--brand-green-100);
  --brand-green-pill-text: var(--brand-green-ink);
  --brand-green-pill-border: var(--brand-green-200);
  --brand-green-toggle-on-start: var(--brand-green-400);
  --brand-green-toggle-on-end: var(--brand-green);
}