/*
    Design tokens, ported from the MAUI resource dictionaries so the web panel reads as the same
    product. Key names mirror ThemeGlass.xaml / ThemeFlat.xaml exactly: --accent here is
    ThemeAccent there. The two theme blocks expose an identical variable vocabulary, for the same
    reason the XAML pair does - a token defined in one and not the other fails only for whichever
    theme is missing it, and silently.

    Alpha channel order differs between the platforms and is easy to get wrong by eye: MAUI writes
    #AARRGGBB, CSS writes #RRGGBBAA. Every translucent value below was converted mechanically and
    checked, e.g. ThemeDivider #22FFFFFF -> #FFFFFF22, which is the 13% white the XAML comment
    describes.

    Source of truth is still the XAML today. docs/WebAdmin-Implementation-Plan.md Phase 2 promotes
    these to a C# record in Reflex.Core with a drift test across all three hosts.
*/

/* ---------------------------------------------------------------------------------------------
   Glass - translucent frosted surfaces over the animated shader background. Teal-cyan accent,
   large radii, soft ambient shadows. The fills are deliberately translucent so the shader shows
   through; this is layered alpha rather than a platform blur, which is exactly why it ports.
   --------------------------------------------------------------------------------------------- */
.theme-glass {
    /*
        Not a token - a real property, and the one thing that makes native controls obey the theme.
        Checkboxes, radios, the select popup and scrollbars are painted by the user agent, which
        picks its palette from color-scheme and ignores every custom property here. Without it a
        checkbox renders as a light-mode control on a dark glass panel, which is exactly the "flat
        style checkbox" complaint. accent-color only tints the CHECKED state, so it cannot fix this
        on its own.
    */
    color-scheme: dark;

    --accent: #5AC8FA;
    --accent-muted: #33B2E0;
    --danger: #FF6464;
    --success: #00FF88;
    --warning: #FF9500;

    --page-background: #0A0A0A;
    --text-primary: #FFFFFF;
    --text-secondary: #AEAEB2;
    --divider: #FFFFFF22;

    --panel-bg: #10182038;
    --panel-stroke: #FFFFFF40;
    --panel-radius: 8px;
    --panel-padding: 14px;
    --panel-shadow: 0 0 18px rgba(0, 0, 0, 0.22);

    --card-bg: #10182028;
    --card-stroke: #FFFFFF32;
    --card-radius: 8px;
    --card-padding: 10px;
    --card-shadow: 0 0 14px rgba(0, 0, 0, 0.18);

    --tile-bg: #10182030;
    --tile-stroke: #5AC8FA40;
    --tile-radius: 8px;

    --pill-bg: #00FF8828;
    --pill-stroke: #00FF8860;
    --pill-radius: 8px;

    --field-bg: #00000026;
    --field-stroke: #FFFFFF26;
    --field-radius: 8px;

    --ghost-bg: #00000033;
    --primary-button-text: #08121A;
    --mono-color: #DCEBFF;

    /* Shared control scale. Every horizontal group uses one of these heights. */
    --control-height-sm: 28px;
    --control-height: 32px;
    --control-height-lg: 40px;

    --space-05: 2px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* The theme's surface colour with NO alpha, for the two places translucency does not exist:
       the browser's autofill fill, and the platform-drawn <select> option list. Both are painted
       outside the page's compositing tree, so a translucent colour there has nothing to blend with
       and collapses to a flat grey wash. Matched to the glass panel so both still read as the
       surface they belong to. */
    --surface-opaque: #16202B;

    /* Table row hover. Its own token rather than reusing --ghost-bg, which is also the ghost-button
       fill and the muted-pill fill, and which is transparent in Flat - so rows there had no hover
       at all. */
    --row-hover: #FFFFFF14;

    /* Type scale, from the named Label styles. */
    --font-title: 22px;
    --font-section: 18px;
    --font-body: 14px;
    --font-caption: 12px;
    --font-value: 13px;
    --font-mono: 13px;
    --font-metric: 28px;

    /* Shown when WebGL is unavailable or the context is lost. Approximates the Flat shader's
       vertical gradient so a failed background still looks deliberate. */
    --bg-fallback:
        radial-gradient(1000px 520px at 50% 0%, rgba(90, 200, 250, 0.13), transparent 68%),
        linear-gradient(180deg, #131620 0%, #0B0D11 100%);
}

/* ---------------------------------------------------------------------------------------------
   Slate - Glass's palette and geometry, rendered on opaque surfaces.

   This look already existed, but only by accident: Glass swapped to a near-opaque dark fill
   whenever the background was animating, so an operator got the frosted product or the dark one
   depending on which background they had picked, with no way to ask for either. It is a good look
   and it is now a surface style you choose, which also means Glass can go back to being glass.

   Deliberately web-only. The desktop hosts ship Glass and Flat, and nothing here is a shared
   value the drift guard covers - the guard reads .theme-glass and .theme-flat by name.

   Opaque by construction, so no backdrop blur is declared for it anywhere: the blur would be
   computed and then completely occluded, which is the exact waste the Glass standdown exists to
   avoid. Every layout-affecting token below is identical to Glass, because a theme changes skin,
   never size.
   --------------------------------------------------------------------------------------------- */
.theme-slate {
    color-scheme: dark;

    --accent: #5AC8FA;
    --accent-strong: #5AC8FA;
    --accent-muted: #33B2E0;
    --danger: #FF6464;
    --success: #00FF88;
    --warning: #FF9500;

    --page-background: #0A0E14;
    --text-primary: #FFFFFF;
    --text-secondary: #AEAEB2;
    --divider: #FFFFFF1F;

    --panel-bg: #141B24;
    --panel-stroke: #FFFFFF1F;
    --panel-radius: 8px;
    --panel-padding: 14px;
    --panel-shadow: 0 0 18px rgba(0, 0, 0, 0.35);

    /* One step lighter than the panel it sits in. Slate has no translucency to separate the two
       surfaces, so the separation has to come from value. */
    --card-bg: #1A222C;
    --card-stroke: #FFFFFF1A;
    --card-radius: 8px;
    --card-padding: 10px;
    --card-shadow: none;

    --tile-bg: #1C2632;
    --tile-stroke: #5AC8FA40;
    --tile-radius: 8px;

    --pill-bg: #FFFFFF14;
    --pill-stroke: #FFFFFF26;
    --pill-radius: 8px;

    --field-bg: #0E141B;
    --field-stroke: #FFFFFF26;
    --field-radius: 8px;

    --ghost-bg: #FFFFFF0F;
    --primary-button-text: #08121A;
    --mono-color: #DCEBFF;

    --control-height-sm: 28px;
    --control-height: 32px;
    --control-height-lg: 40px;

    --space-05: 2px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    --surface-opaque: #141B24;
    --row-hover: #FFFFFF12;

    --font-title: 22px;
    --font-section: 18px;
    --font-body: 14px;
    --font-caption: 12px;
    --font-value: 13px;
    --font-mono: 13px;
    --font-metric: 28px;

    --bg-fallback: linear-gradient(180deg, #10161E 0%, #080B10 100%);
}

/* ---------------------------------------------------------------------------------------------
   Flat - matte surfaces, no translucency, tighter radii, iOS-style blue accent. The MAUI version
   uses AppThemeBinding Light=/Dark= to follow the OS, so the web version follows
   prefers-color-scheme for the same behaviour. Light values are the default.
   --------------------------------------------------------------------------------------------- */
.theme-flat {
    /* Flat's default is a light surface, so native controls should be light too. The dark override
       below flips this along with the rest of the palette. */
    color-scheme: light;

    --accent: #007AFF;
    --accent-muted: #0A84FF;
    --danger: #F44336;
    --success: #2E7D32;
    --warning: #E65100;

    --page-background: #F2F2F7;
    --text-primary: #000000;
    --text-secondary: #8E8E93;
    --divider: #0000001F;

    --panel-bg: #FFFFFF;
    --panel-stroke: #D1D1D6;
    --panel-radius: 6px;
    --panel-padding: 16px;

    /* Two-layer shadow: a tight contact shadow plus a wider ambient one. A single large blur reads as
       a smudge; the pair is what makes a matte surface look deliberately raised rather than plain.
       Shadows are not part of the shared token vocabulary, so this is web-only and does not put the
       CSS out of step with ThemeFlat.xaml. */
    --panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.07);

    --card-bg: #FFFFFF;
    --card-stroke: #E5E5EA;
    --card-radius: 6px;
    --card-padding: 10px 6px;
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

    --tile-bg: #F2F2F7;
    --tile-stroke: #E5E5EA;
    --tile-radius: 6px;

    --pill-bg: #E8F5E9;
    --pill-stroke: transparent;
    --pill-radius: 4px;

    --field-bg: #FFFFFF;
    --field-stroke: #D1D1D6;
    --field-radius: 6px;

    --ghost-bg: transparent;
    --primary-button-text: #FFFFFF;
    --mono-color: #3A3A3C;

    --control-height-sm: 28px;
    --control-height: 32px;
    --control-height-lg: 40px;

    --space-05: 2px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* Light surface, so the hover tint is a dark wash rather than a light one. */
    --row-hover: #0000000A;

    /* Flat's field fill is already opaque white, so masking to the same colour is a no-op that
       simply stops the browser tinting it. */
    --surface-opaque: #FFFFFF;

    --font-title: 20px;
    --font-section: 16px;
    --font-body: 13px;
    --font-caption: 11px;
    --font-value: 13px;
    --font-mono: 12px;
    --font-metric: 28px;

    --bg-fallback:
        radial-gradient(1200px 620px at 50% -10%, rgba(0, 122, 255, 0.10), transparent 70%),
        linear-gradient(180deg, #F7F7FA 0%, #E9E9EF 100%);
}

/* Flat's dark side. Values are the Dark= halves of the AppThemeBinding pairs. */
@media (prefers-color-scheme: dark) {
    .theme-flat {
        color-scheme: dark;

        --page-background: #000000;
        --text-primary: #FFFFFF;
        --text-secondary: #AEAEB2;
        --divider: #FFFFFF1F;

        /* Back to a light wash - the light-mode value above would be invisible on black. */
        --row-hover: #FFFFFF14;

        --surface-opaque: #1C1C1E;

        --panel-bg: #1C1C1E;
        --panel-stroke: #2C2C2E;
        --card-bg: #1C1C1E;
        --card-stroke: #2C2C2E;
        --tile-bg: #2C2C2E;
        --tile-stroke: #3A3A3C;
        --pill-bg: #1B3A1F;
        --field-bg: #2C2C2E;
        --field-stroke: #3A3A3C;
        --mono-color: #D1D1D6;

        /* Darker and larger on a dark surface: the same shadow that reads as depth on white is
           invisible on near-black. */
        --panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 18px rgba(0, 0, 0, 0.4);
        --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);

        --bg-fallback:
            radial-gradient(1100px 580px at 50% -10%, rgba(10, 132, 255, 0.14), transparent 70%),
            linear-gradient(180deg, #12151C 0%, #050608 100%);
    }
}