/* ==========================================================================
   tokens.css — MANAGE brand tokens (web build)
   Canonical values carried verbatim from the print project's base.css.
   Do not improvise colors. The identity is monochromatic-blue by design.
   ========================================================================== */

:root {
    /* ---- Brand core ---- */
    --raven:          #231F20;   /* Primary text, headlines */
    --cerulean:       #3374BA;   /* Primary brand, accents, the A in MANAGE */
    --white:          #FFFFFF;

    /* ---- Blues family (order of preference) ---- */
    --ice:            #D9E8F5;   /* Subtle card backgrounds, accent fills */
    --sky:            #AED4F0;   /* Cover / hero background — "MANAGE blue" */
    --cerulean-light: #7FB9E1;   /* Hover states, secondary accents */
    --deep-sky:       #1F5C99;   /* Darker cerulean, used sparingly */
    --indigo:         #12406E;   /* Between cerulean and midnight */
    --midnight:       #0B2445;   /* Dark surfaces, closing panels */

    /* ---- Neutrals ---- */
    --icefield:       #ECF3FA;   /* Page background — NOT pure white */
    --silver-light:    #E6E6E6;
    --silver-medium:   #BFBFBF;
    --silver-dark:     #8C8C8C;   /* Secondary text, captions */
    --platinum-light:  #F2F2F2;
    --platinum-medium: #D9D9D9;
    --platinum-dark:   #A6A6A6;

    /* ---- Semantic ---- */
    --primary:    var(--cerulean);
    --text:       var(--raven);
    --text-light: var(--silver-dark);
    --bg:         var(--icefield);

    /* ---- Hairline / border tokens (derived, used throughout source) ---- */
    --rule-cerulean:   rgba(51, 116, 186, 0.18);
    --border-soft:     rgba(51, 116, 186, 0.15);
    --border-on-dark:  rgba(255, 255, 255, 0.15);

    /* ---- Type families ----
       Proxima Nova / Frutiger LT Arabic are licensed faces. Inter is the
       canonical EN fallback (per brand book §4 — do not substitute another).
       Swap the licensed primaries in at the head of each stack when available. */
    --f-en: 'Proxima Nova', 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --f-ar: 'Frutiger LT Arabic', 'Cairo', 'Tajawal', sans-serif;

    /* ---- Fluid type scale ----
       Print scale (§4) reinterpreted for screen. clamp(min, fluid, max).
       Display sizes carry the brand's tight negative tracking; eyebrows are
       loose + uppercase. Values chosen so desktop ~matches the pt scale at a
       1280–1440 container and degrades gracefully to mobile. */
    --fs-hero:    clamp(2.75rem, 1.4rem + 6.0vw, 6.5rem);   /* 84pt territory */
    --fs-h1:      clamp(2.0rem, 1.3rem + 3.0vw, 3.25rem);   /* 36pt */
    --fs-h2:      clamp(1.5rem, 1.1rem + 1.7vw, 2.1rem);    /* 24pt */
    --fs-h3:      clamp(1.0rem, 0.95rem + 0.3vw, 1.15rem);  /* 14pt */
    --fs-lead:    clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
    --fs-body:    clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem); /* 11pt */
    --fs-caption: 0.8rem;                                   /* 9pt */
    --fs-eyebrow: 0.72rem;                                  /* 9pt eyebrow */
    --fs-micro:   0.62rem;                                  /* 7pt tagline */
    --fs-stat:    clamp(2.75rem, 1.5rem + 5.5vw, 5.5rem);   /* 40–84pt stat */

    /* ---- Tracking tokens ---- */
    --tr-hero:    -0.04em;
    --tr-display: -0.025em;
    --tr-eyebrow:  0.18em;
    --tr-tag:      0.32em;
    --tr-micro:    0.28em;

    /* ---- Layout geometry (§7) ---- */
    --container:   1320px;          /* within the 1280–1440 band */
    --container-narrow: 980px;
    --pad-x:       80px;            /* desktop side padding */
    --pad-x-mobile: 24px;
    --gutter:      24px;
    --section-y:   clamp(64px, 5vw, 120px);

    /* ---- Motion (§10) — disciplined ---- */
    --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-inout:  cubic-bezier(0.45, 0.05, 0.55, 0.95);
    --dur-fast:    150ms;
    --dur-mid:     220ms;

    /* ---- Header height (sticky offset) ---- */
    --header-h: 96px;
}