/* =============================================================
   Brand · PetVaccineCard (Vet Teal)
   16-stop ramp · primary at brand[80] = #00796B
   Load AFTER tokens.css. Either:
     - load alongside tokens.css for the default theme, or
     - place inside a [data-brand="petvax"] selector for switching.
   ============================================================= */

:root,
[data-brand="petvax"] {
  --brand-10:  #001B17;
  --brand-20:  #002E27;
  --brand-30:  #003E35;
  --brand-40:  #004D40;   /* pressed (light) */
  --brand-50:  #00604F;
  --brand-60:  #006B5C;   /* selected */
  --brand-70:  #007268;   /* hover (light) */
  --brand-80:  #00796B;   /* ← PRIMARY */
  --brand-90:  #14897B;   /* pressed (dark) */
  --brand-100: #2A9D8F;   /* primary (dark) */
  --brand-110: #4DB6AC;   /* hover (dark) */
  --brand-120: #6FC4BB;
  --brand-130: #93D2CC;
  --brand-140: #B4DFDB;
  --brand-150: #D2EBE8;
  --brand-160: #E0F2F1;   /* tinted surface (light) */

  /* Optional secondary accent — used for chips, highlights, "free plan" pill */
  --accent-bg:        #FFE6BD;
  --accent-bg-strong: #F5A623;
  --accent-fg-strong: #7A3A00;

  /* App-shell convenience: a sidebar that uses brand[40] as the dark slab. */
  --shell-sidebar-bg:    var(--brand-40);
  --shell-sidebar-bg-2:  var(--brand-30);
  --shell-sidebar-fg:    #C8E6E3;
  --shell-sidebar-fg-muted: #6DA9A0;
  --shell-sidebar-active-bg: var(--brand-80);
  --shell-sidebar-active-fg: #FFFFFF;
}

[data-theme="dark"][data-brand="petvax"],
[data-theme="dark"]:root {
  /* In dark mode, the sidebar is even darker (uses Background2 ladder). */
  --shell-sidebar-bg:    var(--color-neutral-bg-2);
  --shell-sidebar-bg-2:  var(--color-neutral-bg-3);
  --shell-sidebar-fg:    var(--color-neutral-fg-2);
  --shell-sidebar-fg-muted: var(--color-neutral-fg-3);
  --shell-sidebar-active-bg: var(--color-brand-bg-2);
  --shell-sidebar-active-fg: var(--color-brand-fg-1);
}