.brand-pet {
  --ink: #3c2415;
  --ink-strong: #29170d;
  --ink-muted: #6b3f2b;
  --surface: #fff8f1;
  --surface-raised: #ffffff;
  --surface-soft: #ffedd5;
  --line: #fed7aa;
  --line-strong: #9a3412;
  --brand: #c2410c;
  --brand-strong: #9a3412;
  --brand-soft: #ffedd5;
  --brand-line: #fdba74;
  --accent: #1d4ed8;
  --accent-soft: #dbeafe;
  --hero-glow: #ffedd5;
  --on-brand: #ffffff;
  --brand-shadow: rgb(194 65 12 / 22%);
  --focus: #1d4ed8;
  --danger: #9b2c2c;
  --success: #16613b;
}

.brand-family {
  --ink: #0f172a;
  --ink-strong: #0f172a;
  --ink-muted: #475569;
  --surface: #f8fafc;
  --surface-raised: #ffffff;
  --surface-soft: #eff6ff;
  --line: #cbd5e1;
  --line-strong: #64748b;
  --brand: #1d4ed8;
  --brand-strong: #1e40af;
  --brand-soft: #dbeafe;
  --brand-line: #93c5fd;
  --accent: #047857;
  --accent-soft: #d1fae5;
  --hero-glow: #dbeafe;
  --on-brand: #ffffff;
  --brand-shadow: rgb(29 78 216 / 20%);
  --focus: #1d4ed8;
  --danger: #9b2c2c;
  --success: #176444;
}

@media (prefers-color-scheme: dark) {
  .brand-pet {
    color-scheme: dark;
    --ink: #f5f5f4;
    --ink-strong: #ffffff;
    --ink-muted: #e7e5e4;
    --surface: #1c1917;
    --surface-raised: #292524;
    --surface-soft: #3b3029;
    --line: #57534e;
    --line-strong: #a8a29e;
    --brand: #fdba74;
    --brand-strong: #fdba74;
    --brand-soft: #472c1d;
    --brand-line: #c67a43;
    --accent: #93c5fd;
    --accent-soft: #172554;
    --hero-glow: #3d291e;
    --on-brand: #1c1917;
    --brand-shadow: rgb(253 186 116 / 12%);
    --focus: #93c5fd;
    --danger: #fca5a5;
    --success: #86efac;
  }

  .brand-family {
    color-scheme: dark;
    --ink: #f8fafc;
    --ink-strong: #ffffff;
    --ink-muted: #cbd5e1;
    --surface: #0f172a;
    --surface-raised: #1e293b;
    --surface-soft: #17233a;
    --line: #475569;
    --line-strong: #94a3b8;
    --brand: #93c5fd;
    --brand-strong: #bfdbfe;
    --brand-soft: #172554;
    --brand-line: #3b82f6;
    --accent: #6ee7b7;
    --accent-soft: #064e3b;
    --hero-glow: #172554;
    --on-brand: #0f172a;
    --brand-shadow: rgb(147 197 253 / 12%);
    --focus: #93c5fd;
    --danger: #fca5a5;
    --success: #86efac;
  }
}