/* =====================================================================================================================
   TPD & Super Insurance Claim Value Calculator  —  THE PALETTE

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

   -------------------------------------------------------------------------------------------------------------------
   THE RULE THIS FILE MUST OBEY: ONLY THE ACCENT FAMILY, AND ALWAYS IN BOTH BLOCKS.

   shell.css declares its palette twice — once on :root for light, once on [data-theme="dark"] for dark. This file
   loads after it, so naming a background, a text colour or a border here — even with a perfectly sensible value —
   pins it to whichever theme it was written for and beats shell.css's value for the other one.

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

   -------------------------------------------------------------------------------------------------------------------
   THE ACCENT, AND WHY THIS ONE

   No green and no red: the shell reserves green for money gained and red for money lost, on the figures. On this
   calculator that matters more than on most — the whole report is about what reaches somebody's bank account and
   what does not, and brand-coloured chrome in either family would strand the reader without the one cue they have
   for telling a verdict from a heading.

   A deep petrol blue. Far enough from --success to never be read as a verdict, dark enough to carry white text on
   every stop of its gradient, and outside the cyan end so that the ramp below can run through the domain's own
   sapphire without repeating itself.
   -------------------------------------------------------------------------------------------------------------------

   Coded By Darko G. */

:root {
    --gold: #0B5D7D;
    --gold-bright: #1487B2;
    --gold-light: #7CC7E4;
    --gold-text: #094F6B;
    --gold-tint: rgba(11, 93, 125, 0.13);
    --gold-tint-line: rgba(11, 93, 125, 0.32);
    --champagne: #DFF0F7;

    --primary: #0B5D7D;
    --accent: #0B5D7D;
    --accent-cyan: #1487B2;
    --accent-glow: rgba(11, 93, 125, 0.32);

    /* A sweep across two hues, not one colour lightened and darkened. Every stop clears 4.5:1 against
       --on-accent, because ten components put text or an icon directly on this. */
    --gradient-primary: linear-gradient(115deg, #094F6B 0%, #0B5D7D 42%, #1E5FD8 100%);
    --gradient-vivid: linear-gradient(115deg, #094F6B 0%, #1E5FD8 46%, #123FA8 100%);

    --border-hover: rgba(11, 93, 125, 0.52);
    --input-focus-glow: rgba(11, 93, 125, 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 being
       --gold. The shell's default steps two and three are a sapphire and a CYAN, and a petrol blue accent repeats
       itself against that cyan at step three. So the ramp is declared here and runs the other way: petrol, then
       the domain's sapphire, then a deep navy blue. One ramp, three steps the eye can tell apart, and it ends
       where --gradient-primary ends. Both -text variants are used AS TEXT on --bg-secondary and clear 4.5:1. */
    --accent-2: #1E5FD8;
    --accent-2-bright: #2F70E8;
    --accent-2-text: #1A4BB0;
    --accent-2-tint: rgba(30, 95, 216, 0.13);
    --accent-2-line: rgba(30, 95, 216, 0.32);
    --accent-2-glow: rgba(30, 95, 216, 0.32);
    --accent-3: #123FA8;
    --accent-3-bright: #2952C9;
    --accent-3-text: #0F348B;
    --accent-3-tint: rgba(18, 63, 168, 0.13);
    --accent-3-line: rgba(18, 63, 168, 0.32);
    --accent-3-glow: rgba(18, 63, 168, 0.32);

    /* THE AMBIENT ORBS — the three soft washes behind every page, and the largest coloured objects on the site.
       Same ramp. Do NOT raise the alphas: 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 add more of them. */
    --ambient-1: rgba(11, 93, 125, 0.10);
    --ambient-2: rgba(30, 95, 216, 0.09);
    --ambient-3: rgba(18, 63, 168, 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 values are identical in the
       dark block below.

       They 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. This is the same sweep rebuilt dark: near-black, the accent
       deepened, then the domain's sapphire deepened, and on the cover a fourth stop returning to near-black. The
       accent 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. */
    --dash-hero-gradient: linear-gradient(150deg, #05161E 0%, #073E55 46%, #12356F 100%);
    --dash-hero-accent: #8ED3EE;

    --rp-cover-gradient: linear-gradient(150deg, #05161E 0%, #073E55 38%, #12356F 76%, #04121A 100%);
    --rp-cover-accent: #8ED3EE;

    /* 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: #0b5d7d;
}

[data-theme="dark"] {
    --gold: #46B4DC;
    --gold-bright: #82D2F0;
    --gold-light: #ADE3F7;
    --gold-text: #82D2F0;
    --gold-tint: rgba(70, 180, 220, 0.16);
    --gold-tint-line: rgba(70, 180, 220, 0.36);
    --champagne: #D8EFF9;

    --primary: #46B4DC;
    --accent: #46B4DC;
    --accent-cyan: #82D2F0;
    --accent-glow: rgba(70, 180, 220, 0.34);
    --gradient-primary: linear-gradient(115deg, #2492BC 0%, #46B4DC 42%, #6BA8FF 100%);
    --gradient-vivid: linear-gradient(115deg, #46B4DC 0%, #6BA8FF 46%, #4F86FF 100%);

    --border-hover: rgba(70, 180, 220, 0.52);
    --input-focus-glow: rgba(70, 180, 220, 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: #6BA8FF;
    --accent-2-bright: #9CC5FF;
    --accent-2-text: #9CC5FF;
    --accent-2-tint: rgba(107, 168, 255, 0.17);
    --accent-2-line: rgba(107, 168, 255, 0.36);
    --accent-2-glow: rgba(107, 168, 255, 0.34);
    --accent-3: #4F86FF;
    --accent-3-bright: #86ADFF;
    --accent-3-text: #86ADFF;
    --accent-3-tint: rgba(79, 134, 255, 0.17);
    --accent-3-line: rgba(79, 134, 255, 0.36);
    --accent-3-glow: rgba(79, 134, 255, 0.34);

    --ambient-1: rgba(70, 180, 220, 0.09);
    --ambient-2: rgba(107, 168, 255, 0.08);
    --ambient-3: rgba(79, 134, 255, 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, #05161E 0%, #073E55 46%, #12356F 100%);
    --dash-hero-accent: #8ED3EE;

    --rp-cover-gradient: linear-gradient(150deg, #05161E 0%, #073E55 38%, #12356F 76%, #04121A 100%);
    --rp-cover-accent: #8ED3EE;

    --chart-1: #5aa6c9;
}