/*
 * Public tracking pages (AnonymousTrackingView): tenant-colour utility
 * classes and the FormHeaderComponent brandmark. The tenant colours arrive as
 * --primary-color / --primary-hover / --secondary-color on <html style>,
 * sanitized to #RRGGBB server-side.
 */
.btn-primary { background-color: var(--primary-color); }
.btn-primary:hover { background-color: var(--primary-hover); }
.text-primary { color: var(--primary-color); }
.border-primary { border-color: var(--primary-color); }
.bg-primary { background-color: var(--primary-color); }
.bg-primary-light { background-color: color-mix(in srgb, var(--primary-color) 10%, white); }
.border-primary-light { border-color: color-mix(in srgb, var(--primary-color) 20%, white); }
.focus-primary:focus { --tw-ring-color: var(--primary-color); border-color: var(--primary-color); }

/* FormHeaderComponent emits .brandmark / .header-link markup that relies on
   external CSS. Stone-skinned callers (e.g. CasoFormView) inherit these
   rules from StoneEditorialSkin.chromeCss(); these Tailwind-only pages carry
   the minimal rules here so the brandmark <img> does not render at its
   intrinsic size. */
.brandmark {
    width: 40px; height: 40px;
    border-radius: 8px;
    background: white;
    border: 1px solid #e7e5e4;
    display: flex; align-items: center; justify-content: center;
    padding: 6px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.brandmark img { width: 100%; height: 100%; object-fit: contain; }
.header-link {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.8125rem; font-weight: 500;
    color: #57534e;
    transition: color 0.2s;
    letter-spacing: 0.01em;
}
.header-link:hover { color: var(--primary-color, #0f7a52); }