/* =====================================================================================================================
   TAX RESIDENCY CALCULATOR  —  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.

   TWO RULES, BOTH LEARNED THE HARD WAY

     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 — even with a sensible value — 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. A variable in one and not
        the other is a variable stuck on the wrong theme.

   THE COLOUR ITSELF. Green is reserved for money gained and red for money lost, on the figures, so neither can be
   a brand accent without costing the reader the only cue they have for telling one from the other. This one is a
   steel blue — sober, legible, and far enough from both the domain's default sapphire and the teals two other
   calculators on this domain already use that nobody arriving from one of them thinks they are on the same page.

   Coded By Darko G.
   ===================================================================================================================== */

:root {
    --gold: #1D4E7C;
    --gold-bright: #2A6EA8;
    --gold-light: #8DB8D8;
    --gold-text: #17405F;
    --gold-tint: rgba(29, 78, 124, 0.13);
    --gold-tint-line: rgba(29, 78, 124, 0.32);
    --champagne: #E4EEF6;

    --primary: #1D4E7C;
    --accent: #1D4E7C;
    --accent-cyan: #2A6EA8;
    --accent-glow: rgba(29, 78, 124, 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, #22326B 0%, #1D4E7C 46%, #1B7391 100%);
    --gradient-vivid: linear-gradient(115deg, #1B7391 0%, #1D4E7C 46%, #22326B 100%);

    --border-hover: rgba(29, 78, 124, 0.52);
    --input-focus-glow: rgba(29, 78, 124, 0.18);

    /* THE ACCENT ROTATION. Everything that repeats as siblings — numbered steps, the dashboard cards' icons,
       report section numbers, the progress rail, the section marks — walks a three-step ramp. Step one is
       --gold; steps two and three are these.

       DECLARED RATHER THAN LEFT ON THE SHELL'S DEFAULTS, because the shell's step three is a cyan and this
       calculator's accent is already a blue in that family — leaving it would repeat the first colour at the
       third position, which reads as a mistake rather than as a ramp. The order here runs steel blue, then
       teal, then navy: one ramp, walked in one direction, with all three distinguishable in greyscale.

       Both -text variants clear 4.5:1 on --bg-secondary in their own theme, because both are used as text. */
    --accent-2: #1B7391;
    --accent-2-bright: #2A8FB0;
    --accent-2-text: #155C75;
    --accent-2-tint: rgba(27, 115, 145, 0.13);
    --accent-2-line: rgba(27, 115, 145, 0.32);
    --accent-2-glow: rgba(27, 115, 145, 0.32);

    --accent-3: #22326B;
    --accent-3-bright: #35498F;
    --accent-3-text: #1D2B5C;
    --accent-3-tint: rgba(34, 50, 107, 0.13);
    --accent-3-line: rgba(34, 50, 107, 0.32);
    --accent-3-glow: rgba(34, 50, 107, 0.32);

    /* THE ORBS. The three soft washes behind every page, and the largest coloured objects on the site. Same
       ramp, same order. Nothing above 0.14 has ever looked right, and the fix for a wash that reads too faint
       is never to make it bigger or to add more of them. */
    --ambient-1: rgba(29, 78, 124, 0.10);
    --ambient-2: rgba(27, 115, 145, 0.09);
    --ambient-3: rgba(34, 50, 107, 0.08);

    /* THE TWO FIXED DARK PANELS: the member home's welcome panel (.dash-hero) and page one of the report
       (.rp-cover). 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, and these gradients have to stay dark at every stop.
       The accent on them carries the welcome eyebrow, "Unlimited", and the accented word in the cover title —
       all small text, all needing 4.5:1 against the lightest stop.

       The same values appear in the dark block below, deliberately: these two panels do not change between
       themes, so neither do these. */
    --dash-hero-gradient: linear-gradient(150deg, #06131F 0%, #123B5C 46%, #0D4E63 100%);
    --dash-hero-accent: #93C4E0;

    --rp-cover-gradient: linear-gradient(150deg, #06131F 0%, #123B5C 38%, #0D4E63 76%, #071723 100%);
    --rp-cover-accent: #93C4E0;

    /* 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: #1D4E7C;
}

[data-theme="dark"] {
    --gold: #6FA6D8;
    --gold-bright: #9AC4E8;
    --gold-light: #C2DCF2;
    --gold-text: #9AC4E8;
    --gold-tint: rgba(111, 166, 216, 0.16);
    --gold-tint-line: rgba(111, 166, 216, 0.36);
    --champagne: #E2EFF9;

    --primary: #6FA6D8;
    --accent: #6FA6D8;
    --accent-cyan: #9AC4E8;
    --accent-glow: rgba(111, 166, 216, 0.34);
    --gradient-primary: linear-gradient(115deg, #7C8FE0 0%, #6FA6D8 46%, #56B3CE 100%);
    --gradient-vivid: linear-gradient(115deg, #56B3CE 0%, #6FA6D8 46%, #7C8FE0 100%);

    --border-hover: rgba(111, 166, 216, 0.52);
    --input-focus-glow: rgba(111, 166, 216, 0.20);

    /* The rotation and the orbs, in dark. Unlike the panel tokens below 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: #56B3CE;
    --accent-2-bright: #8AD0E2;
    --accent-2-text: #8AD0E2;
    --accent-2-tint: rgba(86, 179, 206, 0.17);
    --accent-2-line: rgba(86, 179, 206, 0.36);
    --accent-2-glow: rgba(86, 179, 206, 0.34);

    --accent-3: #7C8FE0;
    --accent-3-bright: #A9B5F0;
    --accent-3-text: #A9B5F0;
    --accent-3-tint: rgba(124, 143, 224, 0.17);
    --accent-3-line: rgba(124, 143, 224, 0.36);
    --accent-3-glow: rgba(124, 143, 224, 0.34);

    --ambient-1: rgba(111, 166, 216, 0.09);
    --ambient-2: rgba(86, 179, 206, 0.08);
    --ambient-3: rgba(124, 143, 224, 0.07);

    /* The two fixed dark panels. Same values as the light block above, for the reason given there: .dash-hero
       and .rp-cover do not change between themes, so neither do these. */
    --dash-hero-gradient: linear-gradient(150deg, #06131F 0%, #123B5C 46%, #0D4E63 100%);
    --dash-hero-accent: #93C4E0;

    --rp-cover-gradient: linear-gradient(150deg, #06131F 0%, #123B5C 38%, #0D4E63 76%, #071723 100%);
    --rp-cover-accent: #93C4E0;

    --chart-1: #6FA6D8;
}