/* ============================================================
   MFA-CMS admin design tokens
   Loaded site-wide via insert_global_admin_css hook.
   Consumed by admin.css, admin-login.css, provision_user.html,
   and the reusable Django partials under core/templates/core/admin/.
   ============================================================ */

:root {
    /* Kenya Government palette — used as accents. Surface colors stay
       neutral so the admin feels institutional, not decorative. */
    --gok-green:       #006F3C;
    --gok-green-dark:  #00502B;
    --gok-green-tint:  #E6F1EB;
    --gok-red:         #BE0027;
    --gok-red-tint:    #FCEAEE;
    --gok-black:       #0B0B0B;
    --gok-cream:       #F4EFE6;
    --gok-stone-50:    #FAFAFA;
    --gok-stone-100:   #F1F1EF;
    --gok-stone-200:   #E5E5E2;
    --gok-stone-400:   #A3A3A0;
    --gok-stone-700:   #3F3F3E;
    --gok-focus:       #0A66C2;

    /* Shape + shadow */
    --gok-radius-sm:    0.25rem;
    --gok-radius:       0.5rem;
    --gok-radius-lg:    0.75rem;
    --gok-shadow-card:  0 4px 24px rgba(11, 11, 11, 0.08);
    --gok-shadow-focus: 0 0 0 3px rgba(10, 102, 194, 0.35);

    /* Typography — default to Wagtail's own font stack; override only
       for the pre-login surfaces where we want a stronger gov. feel. */
    --gok-font-heading: "Inter", "Lato", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --gok-font-body:    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Flag stripe — re-usable decorative strip along any edge. */
.gok-flag-stripe {
    height: 6px;
    background: linear-gradient(
        to right,
        var(--gok-black) 0%, var(--gok-black) 25%,
        var(--gok-red)   25%, var(--gok-red)   50%,
        var(--gok-green) 50%, var(--gok-green) 75%,
        var(--gok-black) 75%, var(--gok-black) 100%
    );
}

/* Card — used by login, logout, provision form, error pages. */
.gok-card {
    background: #fff;
    border: 1px solid var(--gok-stone-200);
    border-radius: var(--gok-radius);
    box-shadow: var(--gok-shadow-card);
    padding: 2rem;
}

/* Primary + secondary buttons — canonical gov styling. */
.gok-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border-radius: var(--gok-radius);
    font-weight: 600;
    font-family: inherit;
    font-size: 0.95rem;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 120ms ease, box-shadow 120ms ease;
}
.gok-btn--primary {
    background: var(--gok-green);
    color: #fff;
    border-color: var(--gok-green);
}
.gok-btn--primary:hover,
.gok-btn--primary:focus-visible {
    background: var(--gok-green-dark);
    border-color: var(--gok-green-dark);
}
.gok-btn--secondary {
    background: #fff;
    color: var(--gok-green-dark);
    border-color: var(--gok-green);
}
.gok-btn--secondary:hover,
.gok-btn--secondary:focus-visible {
    background: var(--gok-green-tint);
}
.gok-btn:focus-visible {
    outline: 2px solid var(--gok-focus);
    outline-offset: 2px;
    box-shadow: var(--gok-shadow-focus);
}
.gok-btn[disabled],
.gok-btn[aria-busy="true"] {
    cursor: wait;
    opacity: 0.75;
}

/* Banners — success / warning / error. Always 4.5:1 contrast minimum. */
.gok-banner {
    border-radius: var(--gok-radius);
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    line-height: 1.5;
    border-left: 4px solid transparent;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}
.gok-banner--success {
    background: var(--gok-green-tint);
    color: var(--gok-green-dark);
    border-left-color: var(--gok-green);
}
.gok-banner--error {
    background: var(--gok-red-tint);
    color: #7F0019;
    border-left-color: var(--gok-red);
}
.gok-banner--warning {
    background: #FFF7E6;
    color: #664200;
    border-left-color: #B87C00;
}
.gok-banner code {
    background: rgba(11, 11, 11, 0.05);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.82em;
}

/* Reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .gok-btn {
        transition: none;
    }
}