/* Single school brand color presentation layer. Runtime derives these variables
   from the saved color and keeps status/category colors app-owned. */
:root {
    --brand-primary: #76682b;
    --brand-primary-text: #ffffff;
    --brand-primary-hover: #908553;
    --brand-primary-hover-text: #000000;
    --brand-soft: #f1f0ea;
    --brand-border: #76682b;
    --brand-link: #76682b;
}

#app-container {
    --header-banner: var(--brand-primary);
    --experience-banner: var(--brand-primary);
    --experience-banner-text: var(--brand-primary-text);
    --accent-primary: var(--brand-primary);
    --accent-primary-hover: var(--brand-primary-hover);
    --accent-secondary: var(--brand-soft);
    --accent-secondary-hover: var(--brand-link);
    --accent-tertiary: var(--brand-soft);
    --accent-tertiary-hover: #e5e7eb;
    --heading-accent: var(--brand-link);
    --heading-accent2: var(--brand-link);
    --subtitle-accent: #52636d;
    --btn-primary-bg: var(--brand-primary);
    --btn-primary-hover-bg: var(--brand-primary-hover);
}

#app-container :is(.btn-primary, .btn-tertiary, .btn-retro-orange, .btn-retro-brown, .btn-retro-olive, .btn-retro-sage, .btn-retro-slate, .btn-retro-plum):not(.btn-danger):not(.btn-retro-danger):not([data-variant="destructive"]) {
    --v1-action-border: var(--brand-border) !important;
    background-color: var(--brand-primary) !important;
    color: var(--brand-primary-text) !important;
    border: 1px solid var(--brand-border) !important;
    box-sizing: border-box;
}
#app-container .header-bg {
    background-color: var(--brand-primary) !important;
}

#app-container :is(.btn-primary, .btn-tertiary, .btn-retro-orange, .btn-retro-brown, .btn-retro-olive, .btn-retro-sage, .btn-retro-slate, .btn-retro-plum):not(.btn-danger):not(.btn-retro-danger):not([data-variant="destructive"]):hover {
    --v1-action-hover-border: var(--brand-border) !important;
    background-color: var(--brand-primary-hover) !important;
    color: var(--brand-primary-hover-text) !important;
    border-color: var(--brand-border);
}

#app-container .btn-secondary,
#app-container .btn-neutral,
#app-container .btn-back {
    background-color: #ffffff !important;
    color: #303843 !important;
    border-color: #a1a8b2;
}

#app-container :is(.btn-secondary, .btn-neutral, .btn-back):hover {
    background-color: #f3f4f6 !important;
    color: #20252c !important;
    border-color: #7b8490;
}

#app-container .header-text { color: var(--brand-primary-text) !important; }
#app-container .experience-link { color: var(--brand-link); }
#app-container .nav-menu-item:hover { color: var(--brand-link); }
#app-container.experience-shell a:not(.btn):not([class*="btn-"]):not(.header-text) { color: var(--brand-link); }

#brand-color-preview-action,
.brand-color-preview-action {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    padding: 10px 16px;
    background: var(--brand-primary);
    color: var(--brand-primary-text);
    font-weight: 650;
}
.brand-color-preview-link { color: var(--brand-link); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
#brand-color-preview [style*="--brand-soft"] { background: var(--brand-soft) !important; color: var(--brand-link) !important; border-color: var(--brand-border) !important; }
#brand-color-preview:focus-visible { outline: 3px solid #20252c; outline-offset: 3px; }

@media (max-width: 640px) {
    #brand-color-preview > div { align-items: stretch; }
    #brand-color-preview-action { width: 100%; }
}

@media (forced-colors: active) {
    #app-container :is(.btn-primary, .btn-tertiary, .btn-retro-orange, .btn-retro-brown, .btn-retro-olive, .btn-retro-sage, .btn-retro-slate, .btn-retro-plum):not(.btn-danger):not(.btn-retro-danger):not([data-variant="destructive"]) {
        border-color: ButtonText !important;
        forced-color-adjust: auto;
    }
}