/* ==========================================================================
   LABSINCU - canonical design tokens
   ==========================================================================

   One place for the brand palette. Everything else on the site (the li-,
   cfc-, edu- and defense-zone stylesheets) now maps its own primary colour
   onto this ramp instead of hardcoding its own purple, so the brand reads the
   same on every page.

   Before this file there were four different "brand purples" in play:
     labsincu-home.css   #3700B3
     chefincu-home.css   #6D28D9
     education-home.css  #7C5CFF
     defense-zone.css    #8B5CF6
   which one you saw depended on which page you happened to be on.

   The ramp is anchored on --brand-500 = #7C5CFF, the purple in the site logo
   (assets/images/logoIcon/logo.png). Anchoring on the logo is deliberate: the
   mark sits inside the header, so the header's primary and the logo have to
   agree. The older purples are kept as the darker steps of the same ramp
   rather than thrown away, so anything that wanted a deeper tone still has
   one.

   To retune the whole site's brand colour, change --brand-500 (and, if you
   want a different depth, --brand-700). Nothing else needs editing.

   This file must load BEFORE the stylesheets that consume it.
   ========================================================================== */

:root {
    /* Brand ramp ---------------------------------------------------------- */
    --brand-50: #F1EDFF;
    --brand-100: #E0D8FF;
    --brand-200: #C6B6FF;
    --brand-300: #A98FFF;
    --brand-400: #9375FF;
    --brand-500: #7C5CFF;
    --brand-600: #6A45F0;
    --brand-700: #5B3DF0;
    --brand-800: #4C1D95;
    --brand-900: #3700B3;
    --brand-950: #2E1065;

    /* Brand roles. Use these rather than a numbered step where the intent is
       semantic, so a future retune only has to move the numbers above. */
    --brand: var(--brand-500);
    --brand-hover: var(--brand-600);
    /* AA against white for body-size text; --brand alone is large-text only. */
    --brand-text: var(--brand-700);
    --brand-deep: var(--brand-900);
    --brand-tint: var(--brand-50);
    --brand-rgb: 124, 92, 255;

    /* Supporting accents, carried over from the existing stylesheets so the
       secondary palette does not drift either. */
    --accent-gold: #C9A84C;
    --accent-gold-soft: #E4C77A;
    --accent-amber: #FFB020;
    --accent-green: #3ECF8E;

    /* Type ---------------------------------------------------------------- */
    /* Arabic is this site's default language, and none of the Latin faces the
       site loads (Poppins, Roboto, Oswald, Playfair, Plus Jakarta) carry Arabic
       glyphs - so every Arabic character used to fall back to whatever the
       visitor's OS happened to supply. IBM Plex Sans Arabic is loaded for them.

       It sits AFTER the Latin face in each stack on purpose: Latin characters
       are found in Poppins and stop there, while Arabic characters miss in
       Poppins and fall through to Plex Arabic. That gives correct type in both
       languages, including on the mixed Arabic/Latin pages this site has (the
       LABSINCU wordmark stays Latin inside Arabic copy), with no locale branch.

       To switch the Arabic face - Cairo, Tajawal and Noto Kufi Arabic are the
       usual alternatives - change --font-arabic here and the family in the
       Google Fonts link in web/layouts/app.blade.php. */
    --font-arabic: "IBM Plex Sans Arabic";
    --font-sans: "Poppins", var(--font-arabic), "Segoe UI", Arial, sans-serif;
}

/* ==========================================================================
   Reduced motion
   ==========================================================================
   The site carries 129 transitions and had no reduced-motion handling at all,
   so a visitor who has asked their operating system to cut animation still got
   every one of them. !important is deliberate here: this has to beat rules in
   four stylesheets that load after this file.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}