/* Palette layer. One file per palette, holding the primitives and nothing else: a palette says
   what a color is, and public/css/tokens.css says what it is for. Which one loads is the flag in
   server/brand.js, and head.html renders the link. Only this layer may name a hex.

   This is Nimblr's own scheme, and every value in it is a value this portal actually rendered
   before the audit. Nothing is invented and nothing is tuned. There are three sources, in this
   order of authority:

   - scss/bulma.scss as of b4a752a8, which is where the brand was declared: $nimblr-blue #29839A,
     $nimblr-dark-blue #15424D, $nimblr-light-blue #A9CDD7, $nimblr-orange #F77C38 (Bulma's
     $primary), $nimblr-green #27B358 ($success), with Bulma's own $danger #ff3860 and $warning
     #ffdd57 and its gray scale left at the defaults the portal used.
   - the compiled public/css/bulma.css of the same commit, for the hover and active steps Bulma
     generated from those bases. #f7742c and #f66c1f are darken(#F77C38, 2.5%) and 5%, and the
     other families' steps are the same two functions. This is why the shades are not a formula
     here: the portal had real ones.
   - the authored stylesheets and public/scripts/dashboard.js of the same commit, for the values no
     variable ever held: the brand blue #123456 and its hover #1C4772, the chart series, the
     provider chips, the chat bubbles and the environment banners.

   Nimblr never published weights, so a weight is assigned by what the value was: the base of each
   family sits at 60 because that is what a filled control was painted with, the hover and active
   steps at 70 and 80, and the pale washes at 5 to 30 by their own lightness. Weights nothing
   points at are marked derived and are interpolated from the family base with one rule, a tint
   being the base mixed with white and a shade the base scaled toward black. No role resolves to a
   derived weight, so nothing on a page depends on one: they exist because every palette answers
   for the same set of primitives, and a tuning pass should have somewhere to start.

   The brand is three colors and not one, which is the fact this file exists to carry. The navy is
   the chrome, the teal is what a link and an informational surface were made of, and the orange is
   what a primary action and a highlight were made of. tokens.css names them primary, secondary and
   accent, and a palette with one brand color answers for all three with the same ramp. */
:root {
    /* The brand navy. 61 authored uses, heaviest in ui.css, wizard.css and sortable.css, with
       #1C4772 as its hover and #1C314F the value the legacy --dark-blue alias held. The tints are
       the pale surfaces the pages actually used at those lightnesses: #F5F5F5 alone backed 102 of
       them, and #E4DEDF was the selected row. */
    --palette-primary-5: #F0FAF5;
    --palette-primary-10: #F5F5F5;
    --palette-primary-15: #E4DEDF;
    --palette-primary-20: #DFE4EA;
    --palette-primary-30: #CBD5DD; /* derived */
    --palette-primary-40: #A9CDD7;
    --palette-primary-50: #8996A6; /* derived */
    --palette-primary-60: #123456;
    --palette-primary-70: #1C4772;
    --palette-primary-80: #1C314F;
    --palette-primary-90: #15424D;
    --palette-primary-100: #122639;
    /* $nimblr-blue, the teal, with Bulma's own hover and active steps for it. 49 authored uses.
       This is what a link, an informational banner and the linked-account button were. */
    --palette-secondary-5: #F4F9FA; /* derived */
    --palette-secondary-10: #E9F2F4; /* derived */
    --palette-secondary-15: #E0EDEF; /* derived */
    --palette-secondary-20: #D6E6EA; /* derived */
    --palette-secondary-30: #C1DADF; /* derived */
    --palette-secondary-40: #ADCDD4; /* derived */
    --palette-secondary-50: #98C1CA; /* derived */
    --palette-secondary-60: #29839A;
    --palette-secondary-70: #267A90;
    --palette-secondary-80: #247286;
    --palette-secondary-90: #1D5C6C; /* derived */
    --palette-secondary-100: #194F5C; /* derived */
    /* $nimblr-orange, Bulma's $primary, with its generated hover and active steps. 76 authored
       uses, which makes it the most used color in the portal after white and the grays: every
       primary button, every highlight and the marker on the navigation bar. */
    --palette-accent-5: #FEF7F3; /* derived */
    --palette-accent-10: #FEEFE7; /* derived */
    --palette-accent-15: #FDE8DC; /* derived */
    --palette-accent-20: #FDE1D1; /* derived */
    --palette-accent-30: #FCD2BB; /* derived */
    --palette-accent-40: #FBC3A4; /* derived */
    --palette-accent-50: #FAB48D; /* derived */
    --palette-accent-60: #F77C38;
    --palette-accent-70: #F7742C;
    --palette-accent-80: #F66C1F;
    --palette-accent-90: #AD5727; /* derived */
    --palette-accent-100: #944A22; /* derived */
    /* Bulma's $danger, the red the portal never overrode, with its generated hover step. #FBF1F3
       backed the inline error messages, #FF5C8A was the lighter red a few links used, and #CC0F35
       and #B7222C were the two dark reds a status dot was drawn in. */
    --palette-negative-5: #FEF6F7;
    --palette-negative-10: #FBF1F3;
    --palette-negative-15: #FEECF0;
    --palette-negative-20: #FFDAE2; /* derived */
    --palette-negative-30: #FFC8D3; /* derived */
    --palette-negative-40: #FFB6C4; /* derived */
    --palette-negative-50: #FF5C8A;
    --palette-negative-60: #FF3860;
    --palette-negative-70: #FF2B56;
    --palette-negative-80: #CC0F35;
    --palette-negative-90: #B7222C;
    --palette-negative-100: #99223A; /* derived */
    /* $nimblr-green, Bulma's $success, with its generated hover and active steps. #257953 is the
       dark green the success text was written in and #48C774 the lighter one a positive border
       used. */
    --palette-positive-5: #EFFAF3;
    --palette-positive-10: #EFFAF5;
    --palette-positive-15: #E1F5E8; /* derived */
    --palette-positive-20: #D7F1E0; /* derived */
    --palette-positive-30: #C3EAD1; /* derived */
    --palette-positive-40: #AFE3C1; /* derived */
    --palette-positive-50: #48C774;
    --palette-positive-60: #27B358;
    --palette-positive-70: #25A953;
    --palette-positive-80: #229E4E;
    --palette-positive-90: #257953;
    --palette-positive-100: #176C35; /* derived */
    /* Bulma's $warning, with its generated hover step, and the two values the attention surfaces
       held: #FFDD81 is what rgba(255, 220, 125, 0.973) composited to over white, which is what
       four of them were painted with. #947600 is the dark amber the warning text was written in,
       and #FFFBEB the palest wash behind it. A yellow is light by nature, so this family's tints
       are shallow and the label on its base is near-black rather than white. */
    --palette-warning-5: #FFFDF5; /* derived */
    --palette-warning-10: #FFFBEB;
    --palette-warning-15: #FFF8DF; /* derived */
    --palette-warning-20: #FFF5D3; /* derived */
    --palette-warning-30: #FFEFBB; /* derived */
    --palette-warning-40: #FFE79E; /* derived */
    --palette-warning-50: #FFDD81;
    --palette-warning-60: #FFDD57;
    --palette-warning-70: #FFDB4A;
    --palette-warning-75: #B2A044;
    --palette-warning-80: #947600;
    --palette-warning-90: #7B6200; /* derived */
    --palette-warning-100: #624E00; /* derived */
    /* The plum a few counters and one status were drawn in. It is named ai because the other
       palette's page publishes a family under that name and every palette answers for the same
       primitives; nothing in this portal is an AI surface, and no role points here today. */
    --palette-ai-5: #FAF5F7; /* derived */
    --palette-ai-10: #F5EBF0; /* derived */
    --palette-ai-15: #F1E2E9; /* derived */
    --palette-ai-20: #ECD7E1; /* derived */
    --palette-ai-30: #E3C3D2; /* derived */
    --palette-ai-40: #D9B0C3; /* derived */
    --palette-ai-50: #D09BB4; /* derived */
    --palette-ai-60: #99285D;
    --palette-ai-70: #8A2454; /* derived */
    --palette-ai-80: #7A204A; /* derived */
    --palette-ai-90: #6B1C41; /* derived */
    --palette-ai-100: #5C1838; /* derived */
    /* The gray scale, which is Bulma's defaults plus the steps the pages added, in lightness
       order: $white-bis #FAFAFA, $white-ter #F5F5F5, $grey-lighter #DBDBDB, $grey-light #B5B5B5,
       $grey #7A7A7A, $grey-dark #4A4A4A and $grey-darker #363636, with #EEEEEE, #CCCCCC (97 uses,
       the most used gray), #AAAAAA, #999999, #888888 and #666666 from the stylesheets. 100 is the
       default body and heading color and the fill Bulma calls is-dark. */
    --palette-neutral-0: #FFFFFF;
    --palette-neutral-5: #FAFAFA;
    --palette-neutral-10: #F5F5F5;
    --palette-neutral-15: #EEEEEE;
    --palette-neutral-20: #DBDBDB;
    --palette-neutral-30: #CCCCCC;
    --palette-neutral-40: #B5B5B5;
    --palette-neutral-50: #AAAAAA;
    --palette-neutral-60: #999999;
    --palette-neutral-70: #888888;
    --palette-neutral-75: #7A7A7A;
    --palette-neutral-80: #666666;
    --palette-neutral-90: #4A4A4A;
    --palette-neutral-100: #363636;
    --palette-neutral-110: #000000;
    /* The additional colors: the distinct hues a chart series, a provider chip, a chat bubble or an
       environment banner needs, which the families above deliberately do not supply. Series colors
       come from public/scripts/dashboard.js and the rest from the stylesheets. Slots keep the hue
       family the other palette gives them wherever a role depends on the hue, which is why the
       provider green and the provider blues sit where they do. */
    --palette-badge-1: #1B70BB; /* Outlook blue */
    --palette-badge-2: #0099C6; /* Series 2 */
    --palette-badge-3: #63B8B8; /* Acuity teal */
    --palette-badge-4: #2EA860; /* Prerelease banner green */
    --palette-badge-5: #59CE72; /* WhatsApp green */
    --palette-badge-6: #FF976E; /* Series 3 */
    --palette-badge-7: #EBCA49; /* Development banner yellow */
    --palette-badge-8: #DC3912; /* Series 9 */
    --palette-badge-9: #990099; /* Series 8 */
    --palette-badge-10: #37707E; /* Staging banner teal */
    --palette-badge-11: #5A7DFA; /* Series 4 */
    --palette-badge-12: #C0CFF9; /* Series 5 */
    --palette-badge-13: #3CA51B; /* Dr. Chrono green */
    --palette-badge-14: #109618; /* Series 6 */
    --palette-badge-15: #FFDD7D; /* Series 7 */
    --palette-badge-16: #3366CC; /* Series 10 */
    --palette-badge-17: #1C9AD5; /* CareCloud blue */
    --palette-badge-18: #78D3F8; /* Sent chat bubble */

    /* Nimblr answers for the orange slot with the orange it already owns, which is its accent base.
       Stated as its own hex rather than as a reference to the accent base, because a palette says
       what a color is and nothing else: the two happening to be the same value here is a fact about
       this brand, not a link that should follow the accent ramp if that ever moves. */
    --palette-orange-60: #F77C38;

    /* And for the two accent slots, with the light blue its chat bubbles are made of and the blue
       its links are. Stated as their own hexes for the same reason the orange above is: a palette
       says what a color is, and two of them happening to match another slot is a fact about this
       brand rather than a link that should follow if either ever moves. Nothing in the default
       build reads these two yet; they are declared because every palette answers for every
       primitive. */
    --palette-cyan-60: #78D3F8;
    --palette-azure-60: #1A73E8;
    /* The message preview, the same values in every palette. See the note in everhealth.css: the
       widget draws a phone's messaging app, which is not brand chrome. These are what this portal
       drew for both brands before the colour layers existed. */
    --palette-chat-5: #F6F6F6;
    --palette-chat-15: #DDDDDD;
    --palette-chat-20: #DBDBDB;
    --palette-chat-40: #B6B6B6;
    --palette-chat-50: #78D3F8;
    --palette-chat-60: #888888;
    --palette-chat-90: #212121;

    /* And the yellow slot, where Nimblr answers with the pale yellow its warning base already is. */
    --palette-yellow-60: #FFDD57;

    /* Compose chrome on preference panels: the Material-ish blue that notification chips and
       dropdown triggers shared as hsl(219, 64%, 54%), and the outline #2674A5 on a selected
       template row. Not the brand teal and not the orange action. */
    --palette-compose-60: #3F73D5;
    --palette-compose-70: #2674A5;
    /* Web-scheduling-only label on the self-scheduling page. */
    --palette-indigo-60: #5B6FD2;
    /* SMS landing / 404 CTA cyan, distinct from secondary teal #29839A and from the published
       accent --palette-cyan-60 above, which is a different colour with a different job. */
    --palette-cta-60: #009EA5;
    /* Mail heading, mail primary button. Same lightness as secondary #29839A but higher
       chroma, so it is its own one-step family rather than a step on that ramp. */
    --palette-teal-60: #00889F;
    /* Google-blue CTAs on the patient SMS landing page only. */
    --palette-link-40: #87A5CC;
    --palette-link-60: #1A73E8;
    --palette-link-70: #025FD9;

    /* vue-multiselect vendor greens (unpkg 2.1.0). */
    --palette-chip-60: #41B883;
    --palette-chip-70: #369A6E;
    --palette-chip-80: #266D4D;
    --palette-chip-90: #FF6A6A;
}