/* VARVOX official logo palette. SVG gradient stops are exact;
   primary blue #2873AD is a frequent interior pixel sampled from JPG-01.
   Source originals: resources/branding. No Stocky brand colors. */
:root {
  --brand-blue: #2873AD;
  --brand-blue-dark: #1F5286;
  --brand-blue-light: #3091D2;
  --brand-red: #C31B1B;
  --brand-red-dark: #A51111;
  --brand-red-light: #DB2323;
  --brand-blue-gradient: linear-gradient(90deg, #1F5286 0%, #3091D2 100%);
  --brand-red-gradient: linear-gradient(90deg, #DB2323 0%, #D52121 24.76%, #C31B1B 58.91%, #A61111 98.35%, #A51111 100%);
  --brand-blue-soft: color-mix(in srgb, var(--brand-blue) 9%, white);
  --brand-blue-wash: color-mix(in srgb, var(--brand-blue) 3%, white);
  --brand-blue-border: color-mix(in srgb, var(--brand-blue) 23%, white);
  --brand-red-soft: color-mix(in srgb, var(--brand-red) 7%, white);
  --brand-red-border: color-mix(in srgb, var(--brand-red) 22%, white);
  --brand-focus: color-mix(in srgb, var(--brand-blue) 65%, white);
  --brand-ink: #182B3A;
  --brand-muted: #526675;
  --brand-line: #DBE2E8;
  --brand-surface: #F4F6F8;
  --brand-success: #168568;
  --brand-shadow: color-mix(in srgb, var(--brand-blue-dark) 8%, transparent);
  --brand-radius: 12px;
  --brand-font: Tahoma, "Segoe UI", Arial, sans-serif;
}
.brand-logo { display: block; width: 174px; max-width: 100%; height: auto; object-fit: contain; }
@media (max-width: 760px) { .brand-logo { width: 142px; } }