/* =====================================================================================================================
   Aged Care RAD vs DAP & Means-Tested Fee Calculator  —  THEME

   Custom properties ONLY. Every rule, layout and component lives in shared/css/shell.css and is identical for every
   calculator on the domain; this file changes what colour it comes out.

   -------------------------------------------------------------------------------------------------------------------
   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. Both are
   specificity 0-1-0, so the dark block wins purely by coming later in the file.

   This file loads AFTER shell.css. So the moment it names a variable on :root, that declaration is later still and
   beats shell.css's DARK value for the same variable. Naming --bg-primary here, even with a perfectly sensible
   light value, therefore forces the light background to win in dark mode.

   The first version of this file did exactly that for about fifteen neutrals and broke the dark theme completely:
   dark accents on a white page.

   Two consequences, and neither is optional:

       1. Only override what genuinely differs between calculators — the accent family below. Backgrounds, text,
          borders and shadows are the shell's and are already themed correctly. Leave them alone.
       2. Whatever appears in :root MUST also appear in [data-theme="dark"]. The two lists are identical, line for
          line. A variable in one and not the other is a variable stuck on the wrong theme.
   -------------------------------------------------------------------------------------------------------------------

   -------------------------------------------------------------------------------------------------------------------
   THE ACCENT: DEEP TEAL-BLUE.

   This calculator used to be teal-green, from before the domain settled on a palette. Two things made that
   untenable once the shell went sapphire. The obvious one is that a green calculator inside a blue domain reads as
   a different site. The other matters more: the shell now uses green to mean "money gained" and red to mean "money
   lost" on the figures themselves, and a green accent puts green chrome next to green results, so the reader loses
   the one cue that tells them which is which.

   So the accent moved to the blue end of teal — far enough from --success to never be mistaken for a verdict,
   close enough to the old colour that a returning visitor recognises the tool. It sits between the shell's sapphire
   and where this calculator started.

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

:root {
    --gold: #0A7AAF;
    --gold-bright: #12A5DE;
    --gold-light: #6FCBEC;
    --gold-text: #096B99;
    --gold-tint: rgba(10, 122, 175, 0.13);
    --gold-tint-line: rgba(10, 122, 175, 0.32);
    --champagne: #E0F3FC;

    --primary: #0A7AAF;
    --accent: #0A7AAF;
    --accent-cyan: #12A5DE;
    --accent-glow: rgba(10, 122, 175, 0.32);
    /* A sweep, not one colour lightened and darkened — and it lands on the domain's sapphire at the far end, so
       this calculator reads as part of the family rather than a separate site. Every stop clears 4.5:1 against
       --on-accent, because components put icons and text directly on this. */
    --gradient-primary: linear-gradient(115deg, #096B99 0%, #0A7AAF 42%, #1E5FD8 100%);
    --gradient-vivid: linear-gradient(115deg, #096B99 0%, #1E5FD8 46%, #123FA8 100%);

    --border-hover: rgba(10, 122, 175, 0.52);
    --input-focus-glow: rgba(10, 122, 175, 0.18);

    /* THE ACCENT ROTATION — steps two and three.

       Everything that repeats as siblings walks a three-step ramp, step one being --gold. The shell's defaults are
       royal, deep blue, then a CYAN — and that cyan is within a few degrees of this calculator's own teal-blue
       accent, so on this tool the rotation ran accent, blue, and then something the eye read as the accent again.
       A three-step rhythm that repeats its first colour is a two-step rhythm with a stutter.

       So it runs the other way here: this tool's teal-blue, then the domain's royal sapphire, then its deep blue.
       One ramp, three steps the eye can actually tell apart, and it ends where --gradient-primary ends. Both -text
       variants are used AS TEXT on --bg-secondary and clear 4.5:1 there: 7.8:1 and 11.1:1 in light, 9.8:1 and
       7.8:1 in dark. */
    --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. Leading with this calculator's teal-blue rather
       than the domain's sapphire, same three positions and the same ramp as above.

       The alphas are NOT raised from the shell's. Its note is explicit that nothing above 0.14 has ever looked
       right and that the way to make these stronger is not to make them bigger. */
    --ambient-1: rgba(10, 122, 175, 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).

       Both are dark in BOTH themes — their text is a near-white literal in shell.css, not a token — so all four of
       these are declared identically in the two blocks. They are theme-independent by nature, and the file's rule
       (everything on :root also on [data-theme="dark"]) is kept literally rather than reasoned around.

       THE CHANGE HERE IS SMALLER THAN IT LOOKS, AND THAT IS THE POINT. The shell's defaults are navy into deep
       teal-blue, which was already inside this calculator's hue family, so these panels never read as the wrong
       tool's the way an amethyst calculator's did. What they did do is lead with the domain's navy and leave this
       tool's own accent as the third stop. These invert that order: near-black, then THIS calculator's teal-blue
       as the dominant mid stop, then the domain's sapphire at the far end — the same construction as
       --gradient-primary above, rebuilt dark.

       Every stop stays dark enough to carry the panels' fixed #E9EFF9: the lightest is 8.1:1. The accent is a pale
       cyan rather than the shell default's pale blue, 6.2:1 on that same stop; it carries the welcome eyebrow,
       "Unlimited", and the accented word in the cover title, and is one value so those three speak in one voice.

       --panel-glow-a/b are deliberately NOT overridden. The shell's blooms are a cyan and a sapphire, which is
       already this calculator's accent family — re-tinting them would be a change with no colour in it. */
    --dash-hero-gradient: linear-gradient(150deg, #051620 0%, #084B6D 46%, #12356F 100%);
    --dash-hero-accent: #8FDCFA;

    --rp-cover-gradient: linear-gradient(150deg, #051620 0%, #084B6D 38%, #12356F 76%, #041019 100%);
    --rp-cover-accent: #8FDCFA;

    /* Chart 1 only, so the report's primary series matches the brand. Charts 2-8 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: #0a7aaf;
}

[data-theme="dark"] {
    --gold: #38C5F5;
    --gold-bright: #7BDBFF;
    --gold-light: #A9E8FF;
    --gold-text: #7BDBFF;
    --gold-tint: rgba(56, 197, 245, 0.17);
    --gold-tint-line: rgba(56, 197, 245, 0.36);
    --champagne: #D6F2FF;

    --primary: #38C5F5;
    --accent: #38C5F5;
    --accent-cyan: #7BDBFF;
    --accent-glow: rgba(56, 197, 245, 0.34);
    --gradient-primary: linear-gradient(115deg, #1E9BCC 0%, #38C5F5 42%, #6BA8FF 100%);
    --gradient-vivid: linear-gradient(115deg, #38C5F5 0%, #6BA8FF 46%, #4F86FF 100%);

    --border-hover: rgba(56, 197, 245, 0.52);
    --input-focus-glow: rgba(56, 197, 245, 0.20);

    /* The rotation and the orbs, in dark. Unlike the panel tokens above these DO flip: they sit on the themed page
       surfaces, not on the two fixed dark panels, 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(56, 197, 245, 0.09);
    --ambient-2: rgba(107, 168, 255, 0.08);
    --ambient-3: rgba(79, 134, 255, 0.07);

    /* The two fixed dark panels, identical to the light block above and for the reason given there: .dash-hero and
       .rp-cover are dark in both themes, so a per-theme value would repaint a surface that does not change. */
    --dash-hero-gradient: linear-gradient(150deg, #051620 0%, #084B6D 46%, #12356F 100%);
    --dash-hero-accent: #8FDCFA;

    --rp-cover-gradient: linear-gradient(150deg, #051620 0%, #084B6D 38%, #12356F 76%, #041019 100%);
    --rp-cover-accent: #8FDCFA;

    --chart-1: #38c5f5;
}