/* =====================================================================================================================
   DIVISION 296 $3M SUPER TAX PROJECTOR  —  THE PALETTE

   CUSTOM PROPERTIES ONLY. shared/css/shell.css holds every rule, every layout and every component; this file
   changes what colour the shell comes out, never how it is built.

   A hundred calculators each free to restyle their own buttons is a hundred stylesheets to maintain and a hundred
   chances to ship something broken on mobile. A hundred calculators that are the same well tested layout in
   different colours is one stylesheet and a palette per tool. Adding a rule here is how that stops being true.

   ---------------------------------------------------------------------------------------------------------------
   THE TWO RULES

     1. ONLY the accent family. Backgrounds, text, borders and shadows belong to shell.css and are already themed
        for both light and dark. Naming one of them here pins it to whichever theme it was written for, because
        this file loads after shell.css and therefore beats its dark block.

     2. Whatever appears in :root MUST also appear in [data-theme="dark"], line for line.

   AND ONE ABOUT THE HUE. Green is money gained and red is money lost, on the figures, so neither can be a brand
   colour. Purple fights the shell's own blue-to-cyan ramp. This calculator is a deep teal — which is safe, and
   which is deliberately not the domain's sapphire, because it sits beside two other calculators and needs to be
   recognisably itself.

   THE ROTATION IS DECLARED HERE RATHER THAN LEFT ON THE DEFAULT, and the shell's own note says why: the default
   third step is a cyan, and a calculator whose accent is already a teal repeats its first colour at step three.
   So the ramp runs AWAY from cyan — teal, steel blue, deep indigo — which reads as a ramp rather than as
   confetti when the numbered steps, the section marks and the report's section numbers walk it in order.
   ---------------------------------------------------------------------------------------------------------------

   Coded By Darko G. */

:root {
    --gold: #155E75;
    --gold-bright: #0891B2;
    --gold-light: #7DD3E8;
    --gold-text: #114C5F;
    --gold-tint: rgba(21, 94, 117, 0.13);
    --gold-tint-line: rgba(21, 94, 117, 0.32);
    --champagne: #E2F1F6;

    --primary: #155E75;
    --accent: #155E75;
    --accent-cyan: #0891B2;
    --accent-glow: rgba(21, 94, 117, 0.32);

    /* A sweep across two hues, not one colour lightened and darkened. Every stop clears 4.5:1 against
       --on-accent — ten components put text or an icon directly on this. */
    --gradient-primary: linear-gradient(115deg, #0B3A4A 0%, #155E75 46%, #1D4E89 100%);
    --gradient-vivid: linear-gradient(115deg, #1D4E89 0%, #155E75 46%, #0B3A4A 100%);

    --border-hover: rgba(21, 94, 117, 0.52);
    --input-focus-glow: rgba(21, 94, 117, 0.18);

    /* THE ACCENT ROTATION. Everything that repeats as siblings — the numbered wizard steps, the dashboard
       cards' icons, the report's section numbers, the progress rail, the section marks — walks this three
       step ramp in order. Both -text variants clear 4.5:1 on --bg-secondary in this theme, because both are
       used as text rather than as fill. */
    --accent-2: #17638F;
    --accent-2-bright: #2C7FB0;
    --accent-2-text: #14507A;
    --accent-2-tint: rgba(23, 99, 143, 0.13);
    --accent-2-line: rgba(23, 99, 143, 0.32);
    --accent-2-glow: rgba(23, 99, 143, 0.32);

    --accent-3: #1E3A7A;
    --accent-3-bright: #2F52A0;
    --accent-3-text: #1B3369;
    --accent-3-tint: rgba(30, 58, 122, 0.13);
    --accent-3-line: rgba(30, 58, 122, 0.32);
    --accent-3-glow: rgba(30, 58, 122, 0.32);

    /* THE AMBIENT ORBS — the three soft washes behind every page, and the largest coloured objects on the
       site. Same ramp. The shell's note on these is explicit that nothing above 0.14 has ever looked right and
       that the fix for a wash reading too faint is never to make it bigger or add another one. */
    --ambient-1: rgba(21, 94, 117, 0.10);
    --ambient-2: rgba(23, 99, 143, 0.09);
    --ambient-3: rgba(30, 58, 122, 0.08);

    /* THE TWO FIXED DARK PANELS: the member home's welcome panel (.dash-hero) and page one of the report
       (.rp-cover). LEFT ON THE SHELL'S DEFAULTS ON PURPOSE.

       They are the only surfaces on the site that are dark in BOTH themes, so their text is a fixed near-white
       literal in shell.css rather than a token. The shell's defaults are the domain's navy into deep teal-blue
       — which a teal accent belongs under perfectly well, so there is nothing to override and declaring a copy
       here would only pin values that go stale the day the shell's default moves. */

    /* Chart 1 only, so the report's primary series matches the brand. Charts 2-7 are held in common across every
       calculator on purpose: they are chosen to stay distinguishable from one another and in greyscale, and
       re-picking them per tool would quietly break that. */
    --chart-1: #155E75;
}

[data-theme="dark"] {
    --gold: #4FC3DE;
    --gold-bright: #7DD3E8;
    --gold-light: #B5E6F2;
    --gold-text: #7DD3E8;
    --gold-tint: rgba(79, 195, 222, 0.16);
    --gold-tint-line: rgba(79, 195, 222, 0.36);
    --champagne: #DDF2F8;

    --primary: #4FC3DE;
    --accent: #4FC3DE;
    --accent-cyan: #7DD3E8;
    --accent-glow: rgba(79, 195, 222, 0.34);
    --gradient-primary: linear-gradient(115deg, #2E8FA8 0%, #4FC3DE 46%, #6BA8FF 100%);
    --gradient-vivid: linear-gradient(115deg, #6BA8FF 0%, #4FC3DE 46%, #2E8FA8 100%);

    --border-hover: rgba(79, 195, 222, 0.52);
    --input-focus-glow: rgba(79, 195, 222, 0.20);

    /* The rotation and the orbs, in dark. Unlike the two fixed panels these DO flip — they sit on the themed
       page surfaces, so they take the luminous end of the ramp the way --gold does. */
    --accent-2: #5FA8D8;
    --accent-2-bright: #8CC4E8;
    --accent-2-text: #8CC4E8;
    --accent-2-tint: rgba(95, 168, 216, 0.17);
    --accent-2-line: rgba(95, 168, 216, 0.36);
    --accent-2-glow: rgba(95, 168, 216, 0.34);

    --accent-3: #7B95E8;
    --accent-3-bright: #A9B8FF;
    --accent-3-text: #A9B8FF;
    --accent-3-tint: rgba(123, 149, 232, 0.17);
    --accent-3-line: rgba(123, 149, 232, 0.36);
    --accent-3-glow: rgba(123, 149, 232, 0.34);

    --ambient-1: rgba(79, 195, 222, 0.09);
    --ambient-2: rgba(95, 168, 216, 0.08);
    --ambient-3: rgba(123, 149, 232, 0.07);

    /* The two fixed dark panels stay on the shell's defaults here too, for the reason given in the light block:
       .dash-hero and .rp-cover do not change between themes, so there is nothing for this block to flip. */

    --chart-1: #4FC3DE;
}