/**
 * theme-tokens.css — P-MEX design tokens (single source of truth for CSS).
 *
 * These are the canonical brand/layout tokens used by BOTH worlds:
 *   • the Blazor app  (linked in App.razor)
 *   • the Identity Razor Pages (linked in _LayoutLogin.cshtml / _LayoutAuthSplit.cshtml)
 *
 * Brand: P-MEX blue #15529c — the same primary the P-MEX Flutter app uses, so web
 * and mobile read as one product.
 *
 * The `--pci-*` colour tokens are defined in terms of Radzen's `--rz-*` variables with a
 * hard-coded brand fallback:
 *   • In the Blazor app the `:root:root` block below pins the `--rz-*` palette to the
 *     P-MEX brand (Radzen's material theme ships hard-coded indigo/pink otherwise).
 *   • On the Identity pages there is no Radzen theme, so the fallback applies.
 * If a runtime theme editor is added later (see pmex_luebtheen ThemeParameters.cs),
 * its injected values win automatically — everything here already tracks --rz-*.
 */

:root {
    /* ---- P-MEX product brand (both blues straight from the logo) ---- */
    --pci-primary: var(--rz-primary, #15529c);
    --pci-secondary: var(--rz-secondary, #47acea); /* light logo blue */
    /* hover/active shade of primary — derives from the (runtime-themable) base colour */
    --pci-primary-dark: color-mix(in srgb, var(--pci-primary) 84%, #000);
    --pci-primary-light: var(--pci-secondary); /* bottom of the brand gradient */

    /* ---- PSI (Ingenieurbüro Dohm PSI) vendor accent — from the PSI logo. ---- */
    --pci-psi-blue: #1b5ea6;
    --pci-psi-blue-light: #3d9be0;

    /* ---- Semantic ---- */
    --pci-info: var(--rz-info, #1b5ea6);
    --pci-success: var(--rz-success, #43a047);
    --pci-warning: var(--rz-warning, #ffa726);
    --pci-warning-dark: color-mix(in srgb, var(--pci-warning) 84%, #000);
    --pci-danger: var(--rz-danger, #ef5350);

    /* ---- Neutrals / surfaces ---- */
    --pci-text: #333;
    --pci-text-muted: #6c757d;
    --pci-border: #d6d5d5;
    --pci-surface: #f7f7f7; /* page / topbar background */
    --pci-card-bg: #ffffff;
    --pci-on-brand: #ffffff; /* text/icons on a brand-coloured surface */

    /* ---- Brand gradient (sidebar, brand panels): logo dark blue → logo light blue ---- */
    --pci-brand-gradient: linear-gradient(180deg, var(--pci-primary) 0%, var(--pci-primary-light) 100%);

    /* ---- Radius scale ---- */
    --pci-radius-sm: 6px; /* buttons, nav links, inputs */
    --pci-radius-md: 8px; /* content cards */
    --pci-radius-lg: 12px; /* feature cards, auth card */
    --pci-radius-pill: 999px; /* pills, badges */

    /* ---- Spacing scale (rem) ---- */
    --pci-space-1: 0.25rem;
    --pci-space-2: 0.5rem;
    --pci-space-3: 0.75rem;
    --pci-space-4: 1rem;
    --pci-space-6: 1.5rem;
    --pci-space-8: 2rem;

    /* ---- Elevation ramp ---- */
    --pci-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    --pci-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.18);
    --pci-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.12);
    --pci-shadow-brand: 0 3px 10px rgba(21, 82, 156, 0.30); /* blue-tinted, for primary buttons */

    /* ---- Motion ---- */
    --pci-transition: 0.15s ease; /* hover/focus on interactive elements */
    --pci-transition-layout: 0.2s ease-in-out; /* drawers, modals */

    /* ---- Typography ---- */
    --pci-font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* ---- Standard fixed chrome heights ---- */
    --pci-chrome-height: 3.5rem; /* topbar / sidebar brand */
}

/* ------------------------------------------------------------------ *
 * Radzen shade ramp — derived from the six runtime base colours.
 *
 * The six BASE colours (--rz-primary/-secondary/-success/-info/-warning/-danger) are
 * emitted at runtime by App.razor (Blazor app) and _ThemeOverridePartial (Identity
 * pages) from the DB-backed Theme parameters — see Modules/Settings/Theme/. They are
 * deliberately NOT set here, so the injected values win.
 *
 * The material theme hard-codes indigo/pink -light/-lighter/-dark/-darker shades, so
 * overriding only the base would leave indigo hovers and focus rings behind. This block
 * re-derives every shade FROM the base via color-mix — change a base colour on
 * /admin/theme and the whole ramp follows. `:root:root` (specificity 0,2,0) wins over
 * the theme's own :root block regardless of load order.
 * ------------------------------------------------------------------ */
:root:root {
    --rz-primary-light: color-mix(in srgb, var(--rz-primary, #15529c) 72%, #fff);
    --rz-primary-lighter: color-mix(in srgb, var(--rz-primary, #15529c) 12%, transparent);
    --rz-primary-dark: color-mix(in srgb, var(--rz-primary, #15529c) 84%, #000);
    --rz-primary-darker: color-mix(in srgb, var(--rz-primary, #15529c) 68%, #000);

    --rz-secondary-light: color-mix(in srgb, var(--rz-secondary, #47acea) 72%, #fff);
    --rz-secondary-lighter: color-mix(in srgb, var(--rz-secondary, #47acea) 12%, transparent);
    --rz-secondary-dark: color-mix(in srgb, var(--rz-secondary, #47acea) 84%, #000);
    --rz-secondary-darker: color-mix(in srgb, var(--rz-secondary, #47acea) 68%, #000);

    --rz-info-light: color-mix(in srgb, var(--rz-info, #1b5ea6) 72%, #fff);
    --rz-info-lighter: color-mix(in srgb, var(--rz-info, #1b5ea6) 15%, transparent);
    --rz-info-dark: color-mix(in srgb, var(--rz-info, #1b5ea6) 84%, #000);
    --rz-info-darker: color-mix(in srgb, var(--rz-info, #1b5ea6) 68%, #000);

    --rz-success-light: color-mix(in srgb, var(--rz-success, #43a047) 72%, #fff);
    --rz-success-lighter: color-mix(in srgb, var(--rz-success, #43a047) 16%, transparent);
    --rz-success-dark: color-mix(in srgb, var(--rz-success, #43a047) 84%, #000);
    --rz-success-darker: color-mix(in srgb, var(--rz-success, #43a047) 68%, #000);

    --rz-warning-light: color-mix(in srgb, var(--rz-warning, #ffa726) 72%, #fff);
    --rz-warning-lighter: color-mix(in srgb, var(--rz-warning, #ffa726) 20%, transparent);
    --rz-warning-dark: color-mix(in srgb, var(--rz-warning, #ffa726) 80%, #000);
    --rz-warning-darker: color-mix(in srgb, var(--rz-warning, #ffa726) 62%, #000);

    --rz-danger-light: color-mix(in srgb, var(--rz-danger, #ef5350) 72%, #fff);
    --rz-danger-lighter: color-mix(in srgb, var(--rz-danger, #ef5350) 20%, transparent);
    --rz-danger-dark: color-mix(in srgb, var(--rz-danger, #ef5350) 80%, #000);
    --rz-danger-darker: color-mix(in srgb, var(--rz-danger, #ef5350) 62%, #000);

    /* One coherent font for Radzen components AND the page body. */
    --rz-text-font-family: var(--pci-font-family);
}