:root {
    --tenant-primary: #2563eb;
    --tenant-secondary: #84cc16;
    --tenant-tertiary: #1e3a8a;
    --primary: var(--tenant-primary);
    --secondary: var(--tenant-secondary);
}

[x-cloak] {
    display: none !important;
}

body {
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

h1,
h2,
h3 {
    letter-spacing: -0.03em;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, var(--tenant-primary) 0%, var(--tenant-tertiary) 100%);
}

.bg-gradient-primary-secondary {
    background: linear-gradient(135deg, var(--tenant-primary) 0%, var(--tenant-secondary) 100%);
}

.btn-tenant-primary {
    background-color: var(--tenant-primary);
    color: #ffffff;
}

.btn-tenant-primary:hover {
    filter: brightness(0.96);
}

.btn-tenant-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tenant-primary) 55%, #ffffff 45%);
}

.badge-tenant-primary {
    background-color: color-mix(in srgb, var(--tenant-primary) 15%, #ffffff 85%);
    color: color-mix(in srgb, var(--tenant-primary) 88%, #0f172a 12%);
}

.badge-tenant-secondary {
    background-color: color-mix(in srgb, var(--tenant-secondary) 15%, #ffffff 85%);
    color: color-mix(in srgb, var(--tenant-secondary) 88%, #0f172a 12%);
}

.link-tenant-primary {
    color: var(--tenant-primary);
}

.link-tenant-primary:hover {
    filter: brightness(0.92);
}

.icon-tint {
    filter: none;
}

.icon-tint-primary {
    filter: invert(32%) sepia(98%) saturate(1800%) hue-rotate(204deg) brightness(95%) contrast(96%);
}