/* ============================================================
   KIJANI SACCO — BRAND CORE
   Direction 2c: wordmark with the leaf-dotted j.
   One identity for the web app, the Android app, and print.

   This file is the single source of truth for the brand palette
   and typeface. It is loaded on every page, before any other
   stylesheet, so page-level CSS can build on these tokens.

   Assets live in assets/brand/ and are generated — see
   docs/BRAND.md for how to regenerate them.
   ============================================================ */

/* --- Typeface ----------------------------------------------
   Sora, self-hosted. One family everywhere; no second font.
   Sora ships as a variable font, so a single file covers every
   weight from Regular body copy to the ExtraBold wordmark —
   two files, 37kB total, no third-party round-trip on a mobile
   connection. Weights used: 400 body, 600 buttons/labels,
   800 headlines and the wordmark.
   ----------------------------------------------------------- */
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('../assets/fonts/sora-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('../assets/fonts/sora-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Palette -----------------------------------------------
   Forest is the brand anchor: dark surfaces, primary buttons,
   the icon tile. Kijani and Sprout are ACCENTS ONLY — the leaf,
   links, highlights on dark. Never set the wordmark in bright
   green on white.
   ----------------------------------------------------------- */
:root {
    --brand-forest:  #0F3D26;   /* anchor — dark surfaces, the icon tile */
    --brand-kijani:  #22A85B;   /* accent — the leaf on light grounds */
    --brand-sprout:  #4ADE80;   /* accent — highlights on dark grounds */
    --brand-mist:    #F4F7F4;   /* page ground */
    --brand-ink:     #12281A;   /* body text, mono lockup */

    /* Supporting steps, derived from the five above. */
    --brand-forest-deep: #0B2E1C;   /* submenu wells, gradient foot */
    --brand-forest-lift: #15532F;   /* raised dark surfaces, gradient head */
    --brand-link:        #1B7A43;   /* links and the SACCO tag on light */
    --brand-link-hover:  #0F4D2A;
    --brand-sand:        #EEF1EE;   /* neutral tile behind marks */

    /* Type stack. One family; the fallbacks only cover the
       moment before the woff2 lands. */
    --brand-font: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* --- Brand furniture ---------------------------------------
   Helpers for placing the logo. Clearspace on every lockup is
   the height of the "K" — the SVGs carry it internally as
   padding, so these classes only need to set a height.
   ----------------------------------------------------------- */
.brand-lockup {
    display: inline-flex;
    align-items: center;
    height: 34px;
    /* Minimum widths from the brand kit: 96px horizontal, 72px stacked. */
    min-width: 96px;
}
.brand-lockup img { height: 100%; width: auto; display: block; }
.brand-lockup--stacked { height: 72px; min-width: 72px; }
.brand-lockup--sm { height: 26px; }
.brand-lockup--lg { height: 48px; }

/* The j-leaf glyph alone — never the wordmark at icon sizes. */
.brand-mark { height: 32px; width: auto; display: block; }

/* The forest tile, for splash and login panels. */
.brand-tile {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: var(--brand-forest);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
/* The glyph is ~2.9x taller than wide, so it is sized by HEIGHT.
   Sizing by width overshoots the tile and clips the leaf. */
.brand-tile img { height: 58%; width: auto; display: block; }
.brand-tile--sm { width: 40px; height: 40px; border-radius: 9px; }
.brand-tile--lg { width: 96px; height: 96px; border-radius: 21px; }

/* --- Bootstrap bridge --------------------------------------
   Bootstrap is pulled from a CDN after this file on most pages,
   so a plain `:root` here would lose the cascade to Bootstrap's
   own `:root`. Doubling the selector raises specificity above
   it without resorting to !important, which means Bootstrap's
   components inherit Sora and the brand greens wherever a page
   uses .btn-primary, .text-primary and friends.
   ----------------------------------------------------------- */
:root:root {
    --bs-body-font-family: var(--brand-font);
    --bs-body-color: var(--brand-ink);
    --bs-primary: var(--brand-forest);
    --bs-primary-rgb: 15, 61, 38;
    --bs-link-color: var(--brand-link);
    --bs-link-color-rgb: 27, 122, 67;
    --bs-link-hover-color: var(--brand-link-hover);
    --bs-success: var(--brand-kijani);
    --bs-success-rgb: 34, 168, 91;
}

/* --- Flash notice ------------------------------------------
   The "this module isn't available" message used Bootstrap's
   .alert-warning, which is amber on cream and belongs to no
   part of this palette — it read like a browser warning rather
   than a considered answer from the product.

   Forest ground, mist text, sprout rule. Same family as the
   sidebar and the dark surfaces, so a blocked action looks
   like the system speaking rather than something breaking.
   ----------------------------------------------------------- */
.kijani-flash {
    position: fixed;
    top: 16px; right: 16px; left: 16px;
    z-index: 2000;
    max-width: 480px;
    margin-left: auto;
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .85rem 1rem;
    border: 0;
    border-left: 4px solid var(--brand-sprout);
    border-radius: 10px;
    background: var(--brand-forest);
    color: var(--brand-mist);
    font-family: var(--brand-font);
    font-size: .875rem;
    line-height: 1.45;
    box-shadow: 0 10px 30px rgba(15, 61, 38, .28);
    animation: kijani-flash-in .18s ease-out;
}
.kijani-flash--center { margin-right: auto; }
.kijani-flash__icon { color: var(--brand-sprout); flex: 0 0 auto; margin-top: .1rem; }
.kijani-flash__body { flex: 1 1 auto; }
.kijani-flash__close {
    flex: 0 0 auto;
    background: none;
    border: 0;
    color: var(--brand-mist);
    opacity: .6;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 .1rem;
    cursor: pointer;
}
.kijani-flash__close:hover { opacity: 1; }

@keyframes kijani-flash-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .kijani-flash { animation: none; }
}