/* =====================================================================================================================
   MAIN RESIDENCE CGT  —  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.

   AND THE ACCENT IS A DEEP TEAL, NOT A GREEN AND NOT A RED. The shell reserves green for money gained and red for
   money lost, on the figures — and on this calculator almost every figure is one or the other. A brand-coloured
   chrome in either family would cost the reader the only cue they have for telling a saving from a tax bill. Teal
   sits far enough from the domain's own sapphire to look like its own calculator and far enough from both verdict
   colours to stay out of their way.

   Coded By Darko G. */

:root {
    --gold: #10657D;
    --gold-bright: #1A87A6;
    --gold-light: #7FC6DA;
    --gold-text: #0B5265;
    --gold-tint: rgba(16, 101, 125, 0.13);
    --gold-tint-line: rgba(16, 101, 125, 0.32);
    --champagne: #E2F0F5;

    --primary: #10657D;
    --accent: #10657D;
    --accent-cyan: #1A87A6;
    --accent-glow: rgba(16, 101, 125, 0.32);

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

    --border-hover: rgba(16, 101, 125, 0.52);
    --input-focus-glow: rgba(16, 101, 125, 0.18);

    /* THE ACCENT ROTATION AND THE AMBIENT ORBS.

       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 a three-step ramp. Step one is --gold; steps
       two and three are these. They are restated here rather than left on the shell's defaults because those
       defaults are the domain's sapphire ramp, and running a teal accent into two blues reads as confetti rather
       than as a ramp.

       Both -text variants clear 4.5:1 on --bg-secondary in their own theme, because both are used as text. The
       orbs' alphas are the shell's: 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. */
    --accent-2: #093B4E;
    --accent-2-bright: #14566E;
    --accent-2-text: #08303F;
    --accent-2-tint: rgba(9, 59, 78, 0.13);
    --accent-2-line: rgba(9, 59, 78, 0.32);
    --accent-2-glow: rgba(9, 59, 78, 0.32);
    --accent-3: #0F7BA0;
    --accent-3-bright: #2A9DC4;
    --accent-3-text: #0B5E7A;
    --accent-3-tint: rgba(15, 123, 160, 0.13);
    --accent-3-line: rgba(15, 123, 160, 0.32);
    --accent-3-glow: rgba(15, 123, 160, 0.32);

    --ambient-1: rgba(16, 101, 125, 0.10);
    --ambient-2: rgba(9, 59, 78, 0.09);
    --ambient-3: rgba(15, 123, 160, 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 — which is why these four are declared identically in
       both blocks below rather than flipped.

       Every stop is DARK on purpose. These do not take --gradient-primary: that token is a mid-tone in light and
       a light tint in dark, and either one strands the panels' near-white text on a surface it cannot be read
       against. The accent clears 4.5:1 against the lightest stop, because it carries the welcome eyebrow, the
       word "Unlimited" and the accented word in the cover title — all small text. */
    --dash-hero-gradient: linear-gradient(150deg, #04141B 0%, #0B4457 46%, #0A5771 100%);
    --dash-hero-accent: #8ACFE3;

    --rp-cover-gradient: linear-gradient(150deg, #04141B 0%, #0B4457 38%, #0A5771 76%, #041820 100%);
    --rp-cover-accent: #8ACFE3;

    /* 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: #10657D;
}

[data-theme="dark"] {
    --gold: #4FBEDA;
    --gold-bright: #86D6EA;
    --gold-light: #B9E6F2;
    --gold-text: #86D6EA;
    --gold-tint: rgba(79, 190, 218, 0.16);
    --gold-tint-line: rgba(79, 190, 218, 0.36);
    --champagne: #DFF3F9;

    --primary: #4FBEDA;
    --accent: #4FBEDA;
    --accent-cyan: #86D6EA;
    --accent-glow: rgba(79, 190, 218, 0.34);
    --gradient-primary: linear-gradient(115deg, #2E8FAE 0%, #4FBEDA 46%, #38BDF8 100%);
    --gradient-vivid: linear-gradient(115deg, #38BDF8 0%, #4FBEDA 46%, #2E8FAE 100%);

    --border-hover: rgba(79, 190, 218, 0.52);
    --input-focus-glow: rgba(79, 190, 218, 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: #2E8FAE;
    --accent-2-bright: #66B6CF;
    --accent-2-text: #66B6CF;
    --accent-2-tint: rgba(46, 143, 174, 0.17);
    --accent-2-line: rgba(46, 143, 174, 0.36);
    --accent-2-glow: rgba(46, 143, 174, 0.34);
    --accent-3: #38BDF8;
    --accent-3-bright: #7DD8FF;
    --accent-3-text: #7DD8FF;
    --accent-3-tint: rgba(56, 189, 248, 0.17);
    --accent-3-line: rgba(56, 189, 248, 0.36);
    --accent-3-glow: rgba(56, 189, 248, 0.34);

    --ambient-1: rgba(79, 190, 218, 0.09);
    --ambient-2: rgba(46, 143, 174, 0.08);
    --ambient-3: rgba(56, 189, 248, 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, #04141B 0%, #0B4457 46%, #0A5771 100%);
    --dash-hero-accent: #8ACFE3;

    --rp-cover-gradient: linear-gradient(150deg, #04141B 0%, #0B4457 38%, #0A5771 76%, #041820 100%);
    --rp-cover-accent: #8ACFE3;

    --chart-1: #4FBEDA;
}