/* PistonLane design tokens.
   MudBlazor generates --mud-palette-* directly from Theme/PistonLaneTheme.cs and already
   switches those between light/dark. These are the supplementary tokens that fall outside
   MudBlazor's own palette model — radii, shadows, and surfaces MudBlazor doesn't have an
   opinion on (sidebar vs. card vs. elevated popover). Toggled via [data-theme] on <body>, set
   by Routes.razor from ThemeService.IsDarkMode. Mirrors the desktop app's copy of this file
   (wwwroot/css/theme-tokens.css) so both apps render the exact same visual language. */

:root,
[data-theme="light"] {
    --pl-bg-app: #F7F9FC;
    --pl-bg-sidebar: #F1F4F8;
    --pl-bg-surface: #FFFFFF;
    --pl-bg-surface-raised: #FFFFFF;
    --pl-bg-hover: rgba(17, 24, 39, 0.04);

    --pl-text-primary: #172033;
    --pl-text-secondary: #5F6B7A;
    --pl-text-muted: #8B96A5;

    --pl-border-default: #DDE3EA;
    --pl-border-strong: #C3CBD5;

    --pl-brand: #F97316;
    --pl-brand-hover: #EA580C;
    --pl-brand-soft: #FFF1E8;
    --pl-brand-soft-text: #C2410C;

    --pl-success: #22C55E;
    --pl-success-soft: #E9F9EF;
    --pl-success-soft-text: #15803D;
    --pl-warning: #F59E0B;
    --pl-warning-soft: #FEF6E7;
    --pl-warning-soft-text: #B45309;
    --pl-danger: #EF4444;
    --pl-danger-soft: #FDEDED;
    --pl-danger-soft-text: #B91C1C;
    --pl-info: #3B82F6;
    --pl-info-soft: #EAF2FE;
    --pl-info-soft-text: #1D4ED8;
    --pl-neutral-soft: #EEF1F5;
    --pl-neutral-soft-text: #45505F;

    --pl-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
    --pl-shadow-md: 0 4px 16px rgba(17, 24, 39, 0.08);
    --pl-shadow-card-hover: 0 6px 20px rgba(17, 24, 39, 0.10);
}

[data-theme="dark"] {
    --pl-bg-app: #0B1120;
    --pl-bg-sidebar: #111827;
    --pl-bg-surface: #182235;
    --pl-bg-surface-raised: #1D293D;
    --pl-bg-hover: rgba(243, 246, 250, 0.06);

    --pl-text-primary: #F3F6FA;
    --pl-text-secondary: #9EACC0;
    --pl-text-muted: #71809A;

    --pl-border-default: #2C394D;
    --pl-border-strong: #3D4C63;

    --pl-brand: #F97316;
    --pl-brand-hover: #FB923C;
    --pl-brand-soft: #3A1C0D;
    --pl-brand-soft-text: #FDBA74;

    --pl-success: #22C55E;
    --pl-success-soft: rgba(34, 197, 94, 0.16);
    --pl-success-soft-text: #4ADE80;
    --pl-warning: #F59E0B;
    --pl-warning-soft: rgba(245, 158, 11, 0.16);
    --pl-warning-soft-text: #FBBF24;
    --pl-danger: #EF4444;
    --pl-danger-soft: rgba(239, 68, 68, 0.16);
    --pl-danger-soft-text: #F87171;
    --pl-info: #3B82F6;
    --pl-info-soft: rgba(59, 130, 246, 0.16);
    --pl-info-soft-text: #60A5FA;
    --pl-neutral-soft: rgba(158, 172, 192, 0.14);
    --pl-neutral-soft-text: #C3CDDB;

    --pl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --pl-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
    --pl-shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.4);
}

:root {
    --pl-radius-sm: 7px;
    --pl-radius-md: 10px;
    --pl-radius-lg: 14px;

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

    --pl-transition-fast: 130ms ease;
    --pl-transition-base: 160ms ease;
}