:root {
    /* P1 brand colors (exact hex from canvas designs) */
    /* ── PRIVATE. Do not reference from component CSS. ──
       These two are P1's OWN red. They are the raw palette, not "the brand's colour" — the Skynexe
       block has no reason to override a P1-named value, and doesn't. A component reaching for one
       of these is hardcoded to P1 by definition, and looks perfect on the P1 build, which is why
       this bug was invisible and shipped four times (Setup buttons, their hovers, their box-shadow
       glows, and the loader arc).

       The underscore is the enforcement: use --p1-brand-btn / --p1-brand-accent instead. Anything
       still asking for --p1-red now gets an invalid value and renders visibly wrong. */
    --_p1-red-raw:  #d42b2b;
    --p1-navy: #1B2A3B;
    --p1-blue: #4FA8E8;

    /* Dark theme surface tokens (from canvas dark-mode screens) */
    --p1-bg: #0a0a0b;
    --p1-surface: #141416;
    --p1-surface-inner: #1e1e22;
    --p1-surface-nav: #0f0f11;
    --p1-border: #2a2a2c;
    --p1-border-subtle: #1e1e22;

    /* Accent used for active states in dark mode (observed as #ef4444 in mobile nav) */
    --p1-accent-active: #ef4444;
    --_p1-red-deep-raw: #a41d24;
    --p1-success: #22c55e;
    --p1-success-desktop: #6ac355;
    --p1-border-alt: #2d3032;
    --p1-text-muted: #4b5563;
    --p1-radius-card: 16px;
    --p1-radius-card-lg: 24px;
    --p1-radius-control: 12px;

    --p1-text-primary: #ffffff;
    --p1-text-secondary: rgba(255, 255, 255, 0.7);

    /* Light theme tokens — taken from the *Light canvas screens (ProfileLight, HomeScreenLight …) */
    --p1-bg-light: #f9f9fb;
    --p1-surface-light: #ffffff;
    --p1-surface-inner-light: #f0f0f5;
    --p1-surface-nav-light: #ffffff;
    --p1-border-light: #e5e7eb;
    --p1-border-subtle-light: #f0f0f5;
    --p1-text-primary-light: #111827;
    --p1-text-secondary-light: #6b7280;
    --p1-text-muted-light: #9ca3af;

    /* ── Status: warning/amber ──
       The FILL stays the same amber in both themes, but the TEXT tone has to flip. Light amber
       (#fbbf24) reads well on a dark card and is close to illegible on a pale amber panel in
       light mode. Use these tokens rather than hardcoding amber. */
    --p1-warning:        #f59e0b;
    --p1-warning-text:   #fcd34d;
    --p1-warning-strong: #fbbf24;
    --p1-warning-bg:     rgba(245, 158, 11, 0.10);
    --p1-warning-tint:   rgba(245, 158, 11, 0.15);
    --p1-warning-border: rgba(245, 158, 11, 0.30);

    /* ── Status: info/blue (callouts) ──
       Callouts were hardcoded dark navy with light text, which stayed dark in light mode and
       left dark text on a dark panel. Use these tokens for every callout. */
    --p1-info:        #3b82f6;
    --p1-info-text:   #93c5fd;
    /* 0.16 over the near-black page lands on the navy the design uses (~#141f36). At 0.10 the
       panel read as grey and lost the "callout" shape entirely. */
    --p1-info-bg:     rgba(59, 130, 246, 0.16);
    --p1-info-border: rgba(59, 130, 246, 0.35);

    /* ── Status: success/green ── */
    --p1-success-text:   #4ade80;
    --p1-success-bg:     rgba(34, 197, 94, 0.10);
    --p1-success-border: rgba(34, 197, 94, 0.30);

    /* ── Gain / loss ──
       The one place in a financial app where colour carries meaning that nothing else carries.
       Everything that renders a gain or a loss goes through these two tokens (never a raw hex),
       which is what lets the colour-vision modes below actually repaint them. */
    --p1-pos: #22c55e;
    --p1-neg: #ef4444;

    /* The TEXT tone for a loss — the mirror of --p1-success-text, and the reason sell amounts and
       sell icons were hardcoding #f87171: there was no token to reach for. Without this they never
       repainted in the colour-vision modes, which is the one place they most needed to. */
    --p1-neg-text: #f87171;

    /* Bare channels, so a tint can keep its own alpha: rgba(var(--p1-pos-rgb), 0.15). Without
       these, every tinted icon tile and status pill would need its own token per opacity. */
    --p1-pos-rgb: 34, 197, 94;
    --p1-neg-rgb: 239, 68, 68;

    /* ── Categorical series (asset allocation, sector, charge breakdown) ──
       These carry meaning ONLY by colour — there's no +/- sign to fall back on — so they're the
       other half of the colour-blind problem. The default set has green and red side by side,
       which is precisely the pair that collapses. */
    --p1-series-1: #2246BA;
    --p1-series-2: #FFC400;
    --p1-series-3: #10A836;
    --p1-series-4: #FF1A1A;
    --p1-series-5: #7B4DFF;


    /* ── Accent palette ──
       Every non-brand accent in the app: the account-type pills and card bars, the quick-action
       icon tiles, the activity-row icon tones, the allocation legends. They're CATEGORICAL — the
       colour is the only thing telling one apart from another — which makes them the other half
       of the colour-blind problem, alongside gain/loss. Routed through tokens so the colour-vision
       modes can repaint them.

       The -rgb variants exist so a tint can keep its own alpha: rgba(var(--p1-accent-blue-rgb), .15). */
    --p1-accent-blue:        #3b82f6;
    --p1-accent-blue-rgb:    59, 130, 246;
    --p1-accent-blue-soft:   #60a5fa;

    --p1-accent-purple:      #a855f7;
    --p1-accent-purple-rgb:  168, 85, 247;
    --p1-accent-purple-soft: #c084fc;

    --p1-accent-amber:       #f59e0b;
    --p1-accent-amber-rgb:   245, 158, 11;
    --p1-accent-amber-soft:  #fbbf24;

    --p1-accent-red:         #ef4444;
    --p1-accent-red-rgb:     239, 68, 68;

    --p1-accent-violet:      #8b5cf6;
    --p1-accent-violet-rgb:  139, 92, 246;
    --p1-accent-violet-soft: #a78bfa;

    --p1-accent-teal:        #14b8a6;
    --p1-accent-cyan:        #06b6d4;
    --p1-accent-indigo:      #6366f1;
    --p1-accent-pink:        #ec4899;
    --p1-accent-orange:      #f97316;

    /* Top-bar height. Every shell uses it, so the logo sits in exactly the same place on every
       page. 56px comfortably clears the 40px avatar and the 32px wordmark. */
    --p1-header-height: 56px;

    /* Breathing room above the logo/avatar. On a device there's no status bar above the header, so
       without this the bar sits flush against the top edge. */
    --p1-header-top: 12px;

    /* ── Brand ──
       A white-label reseller changes the logos and the NAVIGATION colour; the product, the layout
       and the theme stay P1's. These two surfaces are the whole of it.
       P1's own nav is the page surface, so it follows the theme. */
    --p1-nav-header-bg:  transparent;              /* mobile top bar — page gradient shows through */
    --p1-nav-bottom-bg:  var(--p1-surface-nav);    /* mobile tab bar */
    --p1-nav-sidebar-bg: var(--p1-surface);        /* desktop left rail */
    --p1-nav-border:     var(--p1-border);
    --p1-nav-fg:         var(--p1-text-secondary);

    /* Secondary/brand accent — P1's red by default. Used for the avatar, the toggles and the
       active nav state; NOT for red-as-meaning (withdrawals, losses), which stays red. */
    --p1-brand-accent:       #ef4444;
    --p1-brand-accent-rgb:   239, 68, 68;
    --p1-brand-accent-hover: #dc2626;

    /* The primary button. P1's is a deeper red than its accent, so a brand supplies both rather
       than one being derived from the other. */
    --p1-brand-btn:       var(--_p1-red-deep-raw);
    --p1-brand-btn-hover: var(--_p1-red-raw);

    --p1-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* One size for every card heading — "Daily Values", "Allocations", "Recent activity",
       "Provider Details". They were 1rem in some places and 0.875rem in others. */
    --p1-card-title-size: 1rem;
    --p1-card-title-weight: 600;

    /* ── Type scale ──
       There wasn't one. 581 font-sizes were typed in by hand across 33 distinct values, in two
       different units, which is why no two pills, eyebrows or card titles agreed. These are the
       sizes the app already used most — named, so there is somewhere correct to put a font size.

       rem, not px: the Setup and Login screens were px-only and the rest of the app rem-only, so
       the two halves couldn't share a scale at all. */
    --p1-text-2xs:  0.625rem;    /* 10px — pills, micro-labels, badges */
    --p1-text-xs:   0.6875rem;   /* 11px — eyebrows, meta lines */
    --p1-text-sm:   0.75rem;     /* 12px — secondary copy, group headings */
    --p1-text-md:   0.8125rem;   /* 13px — dense body */
    --p1-text-base: 0.875rem;    /* 14px — body */
    --p1-text-lg:   1rem;        /* 16px — card titles */
    --p1-text-xl:   1.125rem;    /* 18px — section titles */
    --p1-text-2xl:  1.25rem;     /* 20px — page / screen titles */
    --p1-text-3xl:  1.5rem;      /* 24px — large screen titles */
    --p1-text-4xl:  1.875rem;    /* 30px — display figures */
    --p1-text-5xl:  2.25rem;     /* 36px — the hero figure */

    --p1-weight-medium:   500;
    --p1-weight-semibold: 600;
    --p1-weight-bold:     700;

    --p1-leading-tight: 1.2;     /* headings */
    --p1-leading-body:  1.5;     /* prose */
    --p1-leading-none:  1;       /* big numerals */

    /* One tracking for every uppercase label. There were six. */
    --p1-tracking-caps:  0.05em;
    --p1-tracking-tight: -0.025em;   /* the hero figure */

    /* White on a brand-coloured fill. Hardcoded 27 times, in two spellings, because there was no
       token for it. NOT --p1-text-primary: this one must stay white when the theme goes light. */
    --p1-text-on-accent: #ffffff;

    /* Responsive breakpoint (mobile canvas < 768px, desktop canvas >= 768px) */
    --p1-breakpoint-desktop: 768px;
}

[data-theme="light"] {
    --p1-bg: var(--p1-bg-light);
    --p1-surface: var(--p1-surface-light);
    --p1-surface-inner: var(--p1-surface-inner-light);
    --p1-surface-nav: var(--p1-surface-nav-light);
    --p1-border: var(--p1-border-light);
    --p1-border-subtle: var(--p1-border-subtle-light);
    --p1-text-primary: var(--p1-text-primary-light);
    --p1-text-secondary: var(--p1-text-secondary-light);
    --p1-text-muted: var(--p1-text-muted-light);

    /* Amber text goes DARK on a light background — this is what makes Outstanding Actions
       legible in light mode instead of pale-on-pale. */
    --p1-warning-text:   #b45309;
    --p1-warning-strong: #92400e;
    --p1-warning-bg:     rgba(245, 158, 11, 0.12);
    --p1-warning-tint:   rgba(245, 158, 11, 0.20);
    --p1-warning-border: rgba(245, 158, 11, 0.45);

    /* Info/success text must go DARK on a light background, same reasoning as amber. */
    --p1-info-text:      #1d4ed8;
    --p1-neg-text:       #b91c1c;
    --p1-info-bg:        rgba(59, 130, 246, 0.10);
    --p1-info-border:    rgba(59, 130, 246, 0.35);

    --p1-success-text:   #15803d;
    --p1-success-bg:     rgba(34, 197, 94, 0.10);
    --p1-success-border: rgba(34, 197, 94, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   COLOUR VISION MODES
   Set via data-cv on <html> (see window.p1ColourVision in index.html), independent of light/dark
   — so any combination of the two works, and it's applied pre-boot so there's no flash.

   Palette is Okabe–Ito, the standard set chosen to stay distinguishable under all three common
   types of colour blindness.

   What these modes repaint:
     • gains and losses           (--p1-pos / --p1-neg, and the tints derived from them)
     • success / warning / info   (callouts, status pills, toggles, allowance bars)
     • the categorical series     (asset allocation, sector, charge breakdown)
     • the performance chart line

   What they deliberately DON'T repaint: P1's brand red — the active nav tab, primary buttons,
   the avatar. That red is never paired against green to convey meaning, so it isn't a hazard;
   changing it would just make the app stop looking like P1.

   Colour is also never the only signal: amounts carry a + or − sign, pending items carry a
   "Pending" label, and the allowance check states "Within limit" in words.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Red–green (deuteranopia / protanopia) — ~8% of men, ~0.5% of women ──
   Gains go blue, losses vermillion. INFO moves to purple so it can't be mistaken for a gain,
   and warning stays amber — vermillion and amber differ enough in lightness to stay apart. */
[data-cv="deuteranopia"],
[data-cv="protanopia"],
[data-cv="tritanopia"] {
    --p1-series-1: #0072B2;
    --p1-series-2: #E69F00;
    --p1-series-3: #009E73;
    --p1-series-4: #D55E00;
    --p1-series-5: #CC79A7;

    --p1-neg:      #D55E00;
    --p1-neg-rgb:  213, 94, 0;
    --p1-neg-text: #F5A26B;

    --p1-info:        #CC79A7;
    --p1-info-text:   #E3AFCB;
    --p1-info-bg:     rgba(204, 121, 167, 0.16);
    --p1-info-border: rgba(204, 121, 167, 0.40);
}

[data-cv="deuteranopia"],
[data-cv="protanopia"] {
    --p1-pos:     #0072B2;   /* blue */
    --p1-pos-rgb: 0, 114, 178;

    --p1-success:        #0072B2;
    --p1-success-text:   #56B4E9;
    --p1-success-bg:     rgba(0, 114, 178, 0.14);
    --p1-success-border: rgba(0, 114, 178, 0.40);
}

/* ── Blue–yellow (tritanopia) — blue and green collapse together ──
   Gains go bluish-green instead of blue, everything else as above. */
[data-cv="tritanopia"] {
    --p1-pos:     #009E73;   /* bluish green */
    --p1-pos-rgb: 0, 158, 115;

    --p1-success:        #009E73;
    --p1-success-text:   #4FD1A5;
    --p1-success-bg:     rgba(0, 158, 115, 0.14);
    --p1-success-border: rgba(0, 158, 115, 0.40);
}

/* Text tones have to go dark on a light background, same reasoning as the base light theme. */
[data-theme="light"][data-cv="deuteranopia"],
[data-theme="light"][data-cv="protanopia"] {
    --p1-success-text: #005B8F;
    --p1-info-text:    #8E3E68;
    --p1-neg-text:     #8A3D00;
}

[data-theme="light"][data-cv="tritanopia"] {
    --p1-success-text: #00674B;
    --p1-info-text:    #8E3E68;
    --p1-neg-text:     #8A3D00;
}

/* Accents remapped to Okabe–Ito. These are what make the account-type pills, card bars, icon
   tiles and allocation legends distinguishable — repainting only gain/loss left the categorical
   colours (green next to red in the same bar) exactly as unreadable as before. */
[data-cv="deuteranopia"],
[data-cv="protanopia"],
[data-cv="tritanopia"] {
    --p1-accent-blue:        #0072B2;
    --p1-accent-blue-rgb:    0, 114, 178;
    --p1-accent-blue-soft:   #56B4E9;

    --p1-accent-purple:      #CC79A7;
    --p1-accent-purple-rgb:  204, 121, 167;
    --p1-accent-purple-soft: #E3AFCB;

    --p1-accent-amber:       #E69F00;
    --p1-accent-amber-rgb:   230, 159, 0;
    --p1-accent-amber-soft:  #F0C674;

    --p1-accent-red:         #D55E00;
    --p1-accent-red-rgb:     213, 94, 0;

    --p1-accent-violet:      #56B4E9;
    --p1-accent-violet-rgb:  86, 180, 233;
    --p1-accent-violet-soft: #8FCDEF;

    --p1-accent-teal:        #009E73;
    --p1-accent-cyan:        #56B4E9;
    --p1-accent-indigo:      #0072B2;
    --p1-accent-pink:        #CC79A7;
    --p1-accent-orange:      #E69F00;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   BRANDS
   Set via data-brand on <html> (see window.p1Brand in index.html). Independent of light/dark and
   of colour vision, so any combination works, and applied pre-boot so the nav never flashes the
   wrong colour.

   A brand owns exactly two things: the logos (swapped in the shell — they're <img> sources, not
   backgrounds, so CSS can't do it) and the navigation colour.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
[data-brand="skynexe"] {
    /* Both nav surfaces take the brand's primary colour — the mobile tab bar and the desktop rail.
       The top bar stays transparent so the page gradient still reads behind the logo. */
    --p1-nav-bottom-bg:  #192838;
    --p1-nav-sidebar-bg: #192838;

    --p1-brand-accent:       #0097d6;
    --p1-brand-accent-rgb:   0, 151, 214;
    --p1-brand-accent-hover: #007bb0;

    --p1-brand-btn:       #0097d6;
    --p1-brand-btn-hover: #007bb0;
    --p1-nav-border:     rgba(255, 255, 255, 0.10);
    /* The nav is this colour in BOTH themes, so its foreground must not follow the theme — in light
       mode the theme's text colour would be near-black on a dark navy bar. */
    --p1-nav-fg:         rgba(255, 255, 255, 0.65);
}