/* =====================================================================================================================
   SUPER DEATH BENEFITS TAX 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 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.

   WHY THIS ONE IS A DEEP TEAL-BLUE. The shell reserves green for money gained and red for money lost, on the
   figures, and this calculator prints more red figures than most — the whole product is one preventable loss. A
   teal-blue accent stays clearly outside both verdict families at a glance, including for a reader with a red-green
   colour vision deficiency, and it is far enough from the domain's default sapphire that a customer who owns two
   of these reports can tell them apart. Every stop below clears 4.5:1 against the text that sits on it.

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

:root {
    --gold: #17607F;
    --gold-bright: #1E7EA6;
    --gold-light: #8CCBE2;
    --gold-text: #124F69;
    --gold-tint: rgba(23, 96, 127, 0.13);
    --gold-tint-line: rgba(23, 96, 127, 0.32);
    --champagne: #E3F1F7;

    --primary: #17607F;
    --accent: #17607F;
    --accent-cyan: #1E7EA6;
    --accent-glow: rgba(23, 96, 127, 0.32);
    /* A sweep across two hues, not one colour lightened and darkened. Every stop is above 4.5:1 against
       --on-accent — ten components put text or an icon directly on this. */
    --gradient-primary: linear-gradient(115deg, #0D3E53 0%, #17607F 46%, #0679A3 100%);
    --gradient-vivid: linear-gradient(115deg, #0679A3 0%, #17607F 46%, #0D3E53 100%);

    --border-hover: rgba(23, 96, 127, 0.52);
    --input-focus-glow: rgba(23, 96, 127, 0.18);

    /* THE ACCENT ROTATION. Everything that repeats as siblings — numbered steps, the dashboard card icons, the
       report section numbers, the progress rail, the section marks — walks a three-step ramp. Step one is --gold.
       These are restated because the shell's defaults are the domain's sapphire ramp, and leaving them there with
       a teal accent above would run this calculator's hue, then two of somebody else's.

       One ramp, walked in order, and both -text variants clear 4.5:1 on --bg-secondary in their own theme. */
    --accent-2: #0D3E53;
    --accent-2-bright: #1B5A75;
    --accent-2-text: #0B3547;
    --accent-2-tint: rgba(13, 62, 83, 0.13);
    --accent-2-line: rgba(13, 62, 83, 0.32);
    --accent-2-glow: rgba(13, 62, 83, 0.32);
    --accent-3: #0679A3;
    --accent-3-bright: #1B9BC9;
    --accent-3-text: #055B7B;
    --accent-3-tint: rgba(6, 121, 163, 0.13);
    --accent-3-line: rgba(6, 121, 163, 0.32);
    --accent-3-glow: rgba(6, 121, 163, 0.32);

    /* The three soft washes behind every page, and the largest coloured objects on the site. Same ramp, and the
       alphas are the shell's — nothing above 0.14 has ever looked right. */
    --ambient-1: rgba(23, 96, 127, 0.10);
    --ambient-2: rgba(13, 62, 83, 0.09);
    --ambient-3: rgba(6, 121, 163, 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 dark in BOTH themes, so their text is a fixed near-white literal in shell.css 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, so it clears 4.5:1 against the
       lightest stop. Same accent value on both panels: those three pieces of text are one voice. */
    --dash-hero-gradient: linear-gradient(150deg, #061A24 0%, #0D3E53 46%, #075772 100%);
    --dash-hero-accent: #8CCBE2;

    --rp-cover-gradient: linear-gradient(150deg, #061A24 0%, #0D3E53 38%, #075772 76%, #05161E 100%);
    --rp-cover-accent: #8CCBE2;

    /* 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. */
    --chart-1: #17607F;
}

[data-theme="dark"] {
    --gold: #5CBEE0;
    --gold-bright: #8FD8F0;
    --gold-light: #BCE9F8;
    --gold-text: #8FD8F0;
    --gold-tint: rgba(92, 190, 224, 0.16);
    --gold-tint-line: rgba(92, 190, 224, 0.36);
    --champagne: #DFF3FB;

    --primary: #5CBEE0;
    --accent: #5CBEE0;
    --accent-cyan: #8FD8F0;
    --accent-glow: rgba(92, 190, 224, 0.34);
    --gradient-primary: linear-gradient(115deg, #3E9CC2 0%, #5CBEE0 46%, #7DD8FF 100%);
    --gradient-vivid: linear-gradient(115deg, #7DD8FF 0%, #5CBEE0 46%, #3E9CC2 100%);

    --border-hover: rgba(92, 190, 224, 0.52);
    --input-focus-glow: rgba(92, 190, 224, 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: #3E9CC2;
    --accent-2-bright: #6FBEDC;
    --accent-2-text: #6FBEDC;
    --accent-2-tint: rgba(62, 156, 194, 0.17);
    --accent-2-line: rgba(62, 156, 194, 0.36);
    --accent-2-glow: rgba(62, 156, 194, 0.34);
    --accent-3: #7DD8FF;
    --accent-3-bright: #A9E6FF;
    --accent-3-text: #A9E6FF;
    --accent-3-tint: rgba(125, 216, 255, 0.17);
    --accent-3-line: rgba(125, 216, 255, 0.36);
    --accent-3-glow: rgba(125, 216, 255, 0.34);

    --ambient-1: rgba(92, 190, 224, 0.09);
    --ambient-2: rgba(62, 156, 194, 0.08);
    --ambient-3: rgba(125, 216, 255, 0.07);

    /* The two fixed dark panels. Same values as the light block above, because .dash-hero and .rp-cover do not
       change between themes. */
    --dash-hero-gradient: linear-gradient(150deg, #061A24 0%, #0D3E53 46%, #075772 100%);
    --dash-hero-accent: #8CCBE2;

    --rp-cover-gradient: linear-gradient(150deg, #061A24 0%, #0D3E53 38%, #075772 76%, #05161E 100%);
    --rp-cover-accent: #8CCBE2;

    --chart-1: #6FC5E4;
}