/* =============================================================================
   im-variables.css
   InclusivMetrics -- colour palette as CSS custom properties
   =============================================================================

   PURPOSE
   Every hex colour that was previously hard-coded across our stylesheets and
   inline <style> blocks now resolves through one of the variables below. The
   same grey was being written four different ways in four different files; a
   brand-colour change meant hunting through nine files.

   THIS FILE MUST LOAD FIRST
   Before Content.css, Layout.css, SignInRegister.css and im-dx.css, all of
   which now consume these variables. It is linked in Root.master and, for the
   pages that do not use the master, in Account/SignIn.aspx, Error.aspx and
   ErrorDX.aspx.

   SCOPE -- THIS WAS A PURE REFACTOR
   Every variable holds the EXACT value it replaced. Nothing was recoloured,
   merged or "tidied". Where the same colour appeared in both shorthand and
   longhand (#fff and #ffffff, #666 and #666666, #999 and #999999, #444 and
   #444444) both now point at one variable -- that is a naming change, not a
   colour change.

   NOT COVERED
   1. DevExpress control attributes in markup -- BorderColor="#acacac",
      BackColor="#eeefef" and similar. These are server-side control
      properties, not CSS, so a custom property cannot reach them. They remain
      the largest block of hard-coded colour in the application:
          #acacac  x28    #eeefef  x21    #676767  x13
      Moving those into CSS classes is a separate, larger piece of work.
   2. bootstrap.css -- third-party, left untouched.
   3. Content/GridView.css -- not linked from anywhere; left untouched.
   4. Colour literals inside stored-procedure-generated markup, e.g. the
      TXACTIVE toggle in proc_ASP_UserConfig_ListUsers, which emits
      style="color:#11DDA5". An inline style CAN reference var(), so those
      could be migrated, but doing so couples the database to this stylesheet.
      Better to move that markup into a DataItemTemplate first.

   BROWSER SUPPORT
   CSS custom properties are unsupported in IE11. Web.config sets
   ieCompatibilityVersion="edge" and the application authenticates via Azure AD
   in a modern browser, so this is not a practical constraint -- but it does
   mean the application will now render uncoloured, rather than merely badly,
   in IE11.
   ============================================================================= */

:root {
    /* -------------------------------------------------------------------------
       BRAND
       ---------------------------------------------------------------------- */
    /* The primary brand green. Also set as the DevExpress theme baseColor in
       Web.config (<themes baseColor="#11DDA5" />) -- change both together. */
    --im-brand: #11DDA5;
    --im-brand-light: #66E9C6;
    --im-brand-lighter: #CCF7ED;
    --im-brand-lightest: #F0FCF9;

    /* Darker partners for --im-brand, added for the redesigned schedule UI.
       --im-brand at #11DDA5 is a bright mint: black on it reads well (13:1) but
       WHITE on it does not (1.6:1). Anywhere a filled control needs white text
       -- primary buttons, active pills -- it has to be the darker tone.
       --im-teal-dark carries white at 4.9:1; the tint is for quiet backgrounds. */
    --im-teal-dark:          #0E7A68;
    --im-teal-tint:          #E6F6F3;
    --im-teal-border:        #C9E8E1;

    /* Amber partners for the same job, added for the API key warning callout.
       --im-warning at #F0AD4E is a badge fill and is far too light to write on:
       it carries near-black at 8:1 but is unusable as a text colour on any pale
       background. These are the callout pair, mirroring the teal one above.
       --im-amber-dark on --im-amber-tint is 5.1:1, so it passes AA for the body
       copy as well as the heading. */
    --im-amber-dark:         #8A6116;
    --im-amber-tint:         #FDF4E3;
    --im-amber-border:       #F2DFB3;

    /* Red partners, completing the set, added for the health pills.
       --im-danger at #D9534F is a badge FILL and is only 3.46:1 on the tint
       below - fine as a block of colour, not as text on one. --im-danger-dark
       gives 5.72:1, in line with the teal (4.71) and amber (5.06) pairs above. */
    --im-danger-dark:        #B3261E;
    --im-danger-tint:        #FDECEA;
    --im-danger-border:      #F7CFCB;

    /* Blue partners, added for the toast theme. The other three families were
       here already; INFORMATION had no tint at all, so a toastr info message
       was the one status that could not be tinted from this palette.
       --im-info-dark is the blue the toast icons already used, promoted out of
       Content/toastr-theme.css so the family is defined in one place like the
       rest. 5.0:1 on white, and 4.6:1 on its own tint.

       --im-teal-border, --im-danger-border and these complete the tint+border
       pairs that --im-amber-border started: a tinted callout on a white page
       needs an edge, or it reads as a printing artefact rather than a panel. */
    --im-info-dark:          #0C66E4;
    --im-info-tint:          #EAF2FD;
    --im-info-border:        #CBDFF9;

    /* Dark navy. Sign-in headings and body copy on the unauthenticated pages. */
    --im-brand-dark: #071E29;
    /* Purple used by the .custom-rect SVG fill and in Content.css. */
    --im-accent-purple: #664C9F;
    /* -------------------------------------------------------------------------
       STATUS / FEEDBACK
       Bootstrap's contextual palette, inherited from the theme this app was
       built on. Used by the .border-date* badges.
       ---------------------------------------------------------------------- */

    --im-danger: #D9534F;
    --im-warning: #F0AD4E;
    --im-success: #4AB564;
    /* Secondary orange accents, Content.css only. */
    --im-accent-orange: #FAA96C;
    --im-accent-orange-dark: #BA5D15;
    /* -------------------------------------------------------------------------
       SURFACES
       Backgrounds, lightest to darkest. These are genuinely different values,
       not duplicates -- they have been named, not merged.
       ---------------------------------------------------------------------- */

    --im-white: #FFFFFF;
    --im-surface: #F8F9FA; /* Content.css panels                  */
    --im-surface-alt: #F7F7F7; /* ASPxMenu toolbar background         */
    --im-surface-muted: #F4F4F4; /* grid section / group cell fill      */
    --im-surface-grey: #F2F2F2; /* Content.css                         */
    --im-surface-shade: #F0F0F0; /* Layout.css                          */
    /* -------------------------------------------------------------------------
       BORDERS
       ---------------------------------------------------------------------- */

    --im-border-lightest: #EAEAEA; /* SignInRegister.css                  */
    --im-border-header: #E8EBF2; /* grid header underline               */
    --im-border-light: #E4E4E4; /* Layout.css                          */
    --im-border: #DEE2E6; /* Content.css, most common            */
    --im-border-grey: #DFDFDF; /* MaterialCompact grid table          */
    --im-border-mid: #D8D8D8; /* Content.css                         */
    --im-border-strong: #A8A8A8; /* tab content outline                 */
    /* -------------------------------------------------------------------------
       TEXT
       Darkest to lightest. Contrast ratios below are against --im-white.
       ---------------------------------------------------------------------- */

    --im-black: #000000;
    --im-text: #222222; /* 15.9:1  -- passes AAA               */
    --im-text-body: #444444; /*  9.7:1  -- passes AAA               */
    --im-text-heading: #494949; /*  8.9:1  -- passes AAA               */
    --im-text-secondary: #666666; /*  5.7:1  -- passes AA                */
    --im-text-muted: #808080; /*  3.9:1  -- FAILS AA for body text   */
    --im-text-subtle: #999999; /*  2.8:1  -- FAILS AA                 */
    /* WARNING -- the two below are decorative-contrast only and should not be
       used for anything a user needs to read.
         --im-text-disabled  2.2:1
         --im-text-faint     1.9:1   used by .text-muted-id for the inline
                                     record IDs under Role and Client
         --im-text-faintest  1.6:1   used by .text-muted-id in Root.master
       The code review raised --im-text-faintest as a WCAG 1.4.3 failure. It is
       preserved here at its original value because this file is a refactor,
       not a fix. Raising it to --im-text-secondary is a one-line change once
       the visual impact has been agreed. */
    --im-text-disabled: #BBBBBB;
    --im-text-faint: #D3D3D3;
    --im-text-faintest: #CCCCCC;
}