/* Brand Settings - Auto-generated CSS */
/* Generated on: 2025-07-07 16:52:12 */

:root {
    --brand-primary: #fb0404;
    --brand-secondary: #4af401;
    --brand-accent: #000000;
    --brand-text: #000000;
    --brand-font: Inter, system-ui, sans-serif;
    --brand-heading-font: Inter, system-ui, sans-serif;
    --logo-width: 100px;
    --logo-height: 100px;
}

/* Typography */
body {
    font-family: var(--brand-font);
    color: var(--brand-text);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--brand-heading-font);
}

/* Logo */
.logo img, .site-logo img {
    width: var(--logo-width);
    height: var(--logo-height);
    object-fit: contain;
}

/* Primary Brand Elements */
.btn-primary, .bg-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: color-mix(in srgb, var(--brand-primary) 80%, black) !important;
    border-color: color-mix(in srgb, var(--brand-primary) 80%, black) !important;
}

/* Secondary Brand Elements */
.btn-secondary, .bg-secondary {
    background-color: var(--brand-secondary) !important;
    border-color: var(--brand-secondary) !important;
}

/* Accent Brand Elements */
.btn-warning, .bg-warning, .badge-warning {
    background-color: var(--brand-accent) !important;
    border-color: var(--brand-accent) !important;
}

/* Links */
a {
    color: var(--brand-primary);
}

a:hover {
    color: color-mix(in srgb, var(--brand-primary) 80%, black);
}

/* Navigation */
.navbar-brand {
    font-family: var(--brand-heading-font);
    font-weight: 600;
}

/* Cards and Components */
.card-header.bg-primary {
    background: linear-gradient(135deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 80%, black)) !important;
}

/* Form Elements */
.form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-primary) 25%, transparent);
}

/* Responsive Logo */
@media (max-width: 768px) {
    .logo img, .site-logo img {
        width: calc(var(--logo-width) * 0.8);
        height: calc(var(--logo-height) * 0.8);
    }
}

@media (max-width: 480px) {
    .logo img, .site-logo img {
        width: calc(var(--logo-width) * 0.6);
        height: calc(var(--logo-height) * 0.6);
    }
}