/* ==========================================================================
   Kishoreganj University — design tokens
   The single source of truth for palette, shape, depth and motion.

   Loaded before main.css and every page/component stylesheet. Nothing else
   should declare these values: if a page needs a variant, it redefines the
   token on its own root element (e.g. a dark section setting --kiu-heading),
   it does not re-state the palette.
   ========================================================================== */

:root {
    /* --- Palette ------------------------------------------------------- */
    --kiu-navy: #1B3A6B;
    --kiu-navy-deep: #12294D;
    --kiu-navy-darker: #0D1F3C;
    --kiu-accent: #00A393;
    --kiu-accent-soft: #4FC3B6;
    /* Darker teal for accent-coloured text on light surfaces, where the
       standard accent does not clear contrast comfortably. */
    --kiu-accent-deep: #00897B;
    --kiu-ink: #14213D;
    --kiu-body: #4B5768;
    --kiu-muted: #7A8699;
    --kiu-surface: #F5F7FB;
    --kiu-surface-alt: #EDF1F8;
    --kiu-border: #E1E7F0;
    --kiu-white: #FFFFFF;

    /* --- Shape & depth -------------------------------------------------- */
    --kiu-radius-xs: 6px;
    --kiu-radius-sm: 10px;
    --kiu-radius: 14px;
    --kiu-radius-lg: 20px;
    --kiu-radius-pill: 999px;
    --kiu-shadow: 0 2px 4px rgba(20, 33, 61, .04), 0 12px 28px rgba(20, 33, 61, .06);
    --kiu-shadow-hover: 0 6px 12px rgba(20, 33, 61, .06), 0 20px 44px rgba(20, 33, 61, .12);

    /* --- Motion ---------------------------------------------------------
       Two curves, three durations. The built-in CSS easings are too soft to
       read as intentional; these are stronger variants.

       --kiu-ease-out    entering / exiting elements, hover, colour changes
       --kiu-ease-in-out elements moving or morphing on screen
       Never ease-in: it delays the first frame, which is the frame the eye
       is watching most closely.                                            */
    --kiu-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --kiu-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

    --kiu-dur-press: 160ms;   /* button press feedback */
    --kiu-dur-fast: 180ms;    /* tooltips, small popovers, nav items */
    --kiu-dur: 220ms;         /* dropdowns, cards, the default */
    --kiu-dur-slow: 280ms;    /* drawers, larger panels */

    /* --- Interaction ----------------------------------------------------
       Two lift values and two hover scales, deliberately. Eight arbitrary
       ones read as assembled rather than designed.                         */
    --kiu-lift: -2px;         /* list rows, small cards, links */
    --kiu-lift-lg: -4px;      /* feature cards, tiles that carry an image */
    --kiu-scale-hover: 1.04;  /* image zoom inside a fixed frame */
    --kiu-scale-hover-sm: 1.015;
    --kiu-scale-press: 0.97;  /* every pressable element, on :active */

    /* The navbar shrink-on-scroll. Every scroll-driven property in
       navbar.css references these two so the bar and the badge finish
       together — moved here from navbar.css's :root, values unchanged.
       Deliberately short: the shrink follows the scroll, so anything
       slower reads as the badge lagging behind the page. */
    --kiu-shrink-dur: .26s;
    --kiu-shrink-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- Press feedback ------------------------------------------------------
   627 hover rules and, before this, two :active rules. On touch — most of
   this site's traffic — hover never fires, so a tap produced no response at
   all until the next page painted. A 3% scale is enough to confirm the
   interface heard the user.

   The base rule is wrapped in :where() so it carries the specificity of the
   bare element selector and can never outrank a page stylesheet's own
   transition. The :active rule sets transform only, so it composes with
   whatever colours a page changes on press.                                */
:where(.kiu-btn, .kiu-pagination a, .kiu-pagination button,
       [class*="kiu-"] button:not(:disabled), [class*="kiu-"] .btn) {
    transition: transform var(--kiu-dur-press) var(--kiu-ease-out);
}

.kiu-btn:active,
.kiu-pagination a:active,
.kiu-pagination button:active,
[class*="kiu-"] button:not(:disabled):active,
[class*="kiu-"] .btn:active {
    transform: scale(var(--kiu-scale-press));
}

/* --- Touch pointers ------------------------------------------------------
   627 hover rules, two of which were gated. On a touch device a tap fires
   :hover and it sticks after the finger leaves, so cards stayed lifted and
   images stayed zoomed until the next tap elsewhere.

   Because every lift and hover-scale now reads from a token, neutralising
   them here disables the movement half of every hover on coarse pointers
   without touching a single rule. Colour and shadow hovers stay: they read
   as a selected state rather than a stuck one.                             */
@media not all and (hover: hover) and (pointer: fine) {
    :root {
        --kiu-lift: 0px;
        --kiu-lift-lg: 0px;
        --kiu-scale-hover: 1;
        --kiu-scale-hover-sm: 1;
    }
}

/* --- Reduced motion ------------------------------------------------------
   Fewer and gentler, not zero: opacity and colour transitions aid
   comprehension, so they stay. Movement goes.                              */
@media (prefers-reduced-motion: reduce) {
    :root {
        --kiu-lift: 0px;
        --kiu-lift-lg: 0px;
        --kiu-scale-hover: 1;
        --kiu-scale-hover-sm: 1;
        --kiu-scale-press: 1;
    }
}