/* =====================================================================================================================
   PROPERTY DEVELOPMENT GST & MARGIN SCHEME  —  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.

   ---------------------------------------------------------------------------------------------------------------
   THE TWO RULES

     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.

   AND NOT A GREEN OR A RED. The shell reserves green for money gained and red for money lost, on the figures, and
   an accent in either family puts brand-coloured chrome beside verdict-coloured results. This calculator's accent
   is a DEEP TEAL — blue-green, well clear of the success green, and far enough from the domain's sapphire and
   from the aged care calculator's cyan to read as its own tool.

   The rotation runs teal to sapphire in one direction, so step three does not repeat step one the way it would if
   the shell's default cyan were left in place under a teal accent.
   ---------------------------------------------------------------------------------------------------------------

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

:root {
    --gold: #12707A;
    --gold-bright: #17909D;
    --gold-light: #6FC5CE;
    --gold-text: #0F6169;
    --gold-tint: rgba(18, 112, 122, 0.13);
    --gold-tint-line: rgba(18, 112, 122, 0.32);
    --champagne: #DFF2F4;

    --primary: #12707A;
    --accent: #12707A;
    --accent-cyan: #17909D;
    --accent-glow: rgba(18, 112, 122, 0.32);

    /* A sweep across two hues, not one colour lightened and darkened. Every stop clears 4.5:1 against
       --on-accent: #0E5A62 is 7.9:1, #12707A is 5.8:1 and #12557A is 8.1:1 on white. Ten components put text or
       an icon directly on this. */
    --gradient-primary: linear-gradient(115deg, #0E5A62 0%, #12707A 46%, #12557A 100%);
    --gradient-vivid: linear-gradient(115deg, #12557A 0%, #12707A 46%, #0E5A62 100%);

    --border-hover: rgba(18, 112, 122, 0.52);
    --input-focus-glow: rgba(18, 112, 122, 0.18);

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

       DECLARED HERE RATHER THAN LEFT ON THE SHELL'S DEFAULTS, because the shell's step three is a cyan and this
       accent is a teal: left alone, the rhythm would return almost to where it started. This ramp runs teal into
       teal-blue into sapphire, in one direction, and both -text variants clear 4.5:1 on --bg-secondary. */
    --accent-2: #12557A;
    --accent-2-bright: #1A6E9B;
    --accent-2-text: #0F4867;
    --accent-2-tint: rgba(18, 85, 122, 0.13);
    --accent-2-line: rgba(18, 85, 122, 0.32);
    --accent-2-glow: rgba(18, 85, 122, 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. The alphas are the shell's own and are not raised: nothing above 0.14 has ever looked right, and
       the fix for a wash that reads too faint is never to make it bigger. */
    --ambient-1: rgba(18, 112, 122, 0.10);
    --ambient-2: rgba(18, 85, 122, 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 are declared identically in both
       blocks below.

       Every stop is dark: near-black, this 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, and #8FE3EC clears 8.1:1 against the lightest stop. */
    --dash-hero-gradient: linear-gradient(150deg, #05171A 0%, #0A4C55 46%, #12356F 100%);
    --dash-hero-accent: #8FE3EC;

    --rp-cover-gradient: linear-gradient(150deg, #05171A 0%, #0A4C55 38%, #12356F 76%, #04141B 100%);
    --rp-cover-accent: #8FE3EC;

    /* 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: #12707a;
}

[data-theme="dark"] {
    --gold: #3FC8D4;
    --gold-bright: #7ADFE8;
    --gold-light: #A9EDF3;
    --gold-text: #7ADFE8;
    --gold-tint: rgba(63, 200, 212, 0.17);
    --gold-tint-line: rgba(63, 200, 212, 0.36);
    --champagne: #D6F5F8;

    --primary: #3FC8D4;
    --accent: #3FC8D4;
    --accent-cyan: #7ADFE8;
    --accent-glow: rgba(63, 200, 212, 0.34);
    --gradient-primary: linear-gradient(115deg, #2FA9B8 0%, #3FC8D4 46%, #4F9BD8 100%);
    --gradient-vivid: linear-gradient(115deg, #4F9BD8 0%, #3FC8D4 46%, #2FA9B8 100%);

    --border-hover: rgba(63, 200, 212, 0.52);
    --input-focus-glow: rgba(63, 200, 212, 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: #4F9BD8;
    --accent-2-bright: #86BDEA;
    --accent-2-text: #86BDEA;
    --accent-2-tint: rgba(79, 155, 216, 0.17);
    --accent-2-line: rgba(79, 155, 216, 0.36);
    --accent-2-glow: rgba(79, 155, 216, 0.34);
    --accent-3: #6BA8FF;
    --accent-3-bright: #9CC5FF;
    --accent-3-text: #9CC5FF;
    --accent-3-tint: rgba(107, 168, 255, 0.17);
    --accent-3-line: rgba(107, 168, 255, 0.36);
    --accent-3-glow: rgba(107, 168, 255, 0.34);

    --ambient-1: rgba(63, 200, 212, 0.09);
    --ambient-2: rgba(79, 155, 216, 0.08);
    --ambient-3: rgba(107, 168, 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, #05171A 0%, #0A4C55 46%, #12356F 100%);
    --dash-hero-accent: #8FE3EC;

    --rp-cover-gradient: linear-gradient(150deg, #05171A 0%, #0A4C55 38%, #12356F 76%, #04141B 100%);
    --rp-cover-accent: #8FE3EC;

    --chart-1: #4fc4cf;
}