/**
 * Shared brand tokens — loaded via x-head-inc.
 * Per-shell polish-*.css (loaded last) applies these to each template.
 */
:root {
  --brand-primary: #0055a4;
  --brand-primary-hover: #004488;
  --brand-primary-dark: #073762;
  --brand-primary-light: #e8f1f8;
  --brand-surface: #f5f7fa;
  --brand-text: #1e232d;
  --brand-muted: #6c757d;
  --brand-border: #e4e8ee;
  --brand-radius: 0.5rem;
  --brand-radius-sm: 0.375rem;
  --brand-radius-lg: 0.75rem;
  --brand-shadow: 0 0.125rem 0.5rem rgba(30, 35, 45, 0.08);
  --brand-shadow-lg: 0 0.35rem 1.25rem rgba(30, 35, 45, 0.1);
  --brand-focus-ring: 0 0 0 0.2rem rgba(0, 85, 164, 0.25);
  --brand-transition: 0.2s ease;
  --brand-price: #0a5c0a;

  /* Align common theme vars when present */
  --primary: #0055a4;
}

/* Shared helpers (opt-in) */
.text-price {
  color: var(--brand-price) !important;
}

.brand-card {
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius);
  box-shadow: var(--brand-shadow);
}

.brand-focus:focus,
.brand-focus:focus-visible {
  outline: none;
  box-shadow: var(--brand-focus-ring);
}