/* =============================================================================
   Calculus - application tokens
   -----------------------------------------------------------------------------
   The values that are this application's own, on top of Eyvi.Design's
   tokens.css. Prefixed --app-; nothing here redefines a foundation token.
   Every token is defined for both themes, in the same three blocks as
   tokens.css, and the two dark blocks stay identical.
   ============================================================================= */

:root {
    /* The stages of the pipeline, named by their codes - on screen Concept,
       Budgetary, Proposal, Quotation and Disqualified. Not a traffic light:
       nothing on the way is a warning. A lead and a qualified commercial case
       are good news, in a light sky blue and a lavender; an offer waits for
       the customer, in a warm yellow; and the way ends in one of two colours -
       green for sold, red for lost. From the application's palette, and the
       same in both themes, so a stage keeps its colour in a screenshot and on
       screen.

       FILLS ONLY, behind their own text in --app-on-stage: 11.78:1 on the
       lead, 8.55:1 on qualified, 11.50:1 on the offer, 10.15:1 on sold and
       5.04:1 on lost. A stage is always named in words beside or on its
       colour, so the colour never carries the stage alone - which is why the
       lighter ones may sit at 1.45-2.18:1 on the light surfaces (3.39-3.70:1
       for lost; 4.11-10.72:1 on the dark ones). A small mark in a stage
       colour carries a ring in --color-text-secondary as well, so its shape
       reads on any surface. */
    --app-stage-lead: #a7d3f4;
    --app-stage-qualified: #A5D4BF;
    --app-stage-offer: #EFBF7F;
    --app-stage-sold: #b1c87f;
    --app-stage-lost: #d95d5d;
    --app-on-stage: var(--color-on-severity);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --app-stage-lead: #a7d3f4;
        --app-stage-qualified: #A5D4BF;
        --app-stage-offer: #EFBF7F;
        --app-stage-sold: #b1c87f;
        --app-stage-lost: #d95d5d;
        --app-on-stage: var(--color-on-severity);
    }
}

:root[data-theme="dark"] {
    --app-stage-lead: #a7d3f4;
    --app-stage-qualified: #A5D4BF;
    --app-stage-offer: #EFBF7F;
    --app-stage-sold: #b1c87f;
    --app-stage-lost: #d95d5d;
    --app-on-stage: var(--color-on-severity);
}