/* UPOS design tokens for the plan B Web mockups.
   Values: docs/plans/plan-b/wave5/inventory.md section 3 (from src/Web/UPOS.Web/wwwroot/css/tokens.css).
   The MudBlazor theme of wave 5 maps these to its palette (Primary, Secondary, Background, Surface, AppbarBackground,
   DrawerBackground, TextPrimary, TextSecondary, LinesDefault, Success, Warning, Error, Info). Names use the upos prefix (F9). */

:root,
[data-theme="light"] {
    color-scheme: light;
    --upos-background: #f7f5f2;
    --upos-surface: #ffffff;
    --upos-surface-muted: #f1f4f7;
    --upos-text: #172b4d;
    --upos-text-secondary: #42526e;
    --upos-text-muted: #5e6c84;
    --upos-primary: #146aa5;
    --upos-primary-hover: #105886;
    --upos-primary-tint: #eaf3fb;
    --upos-primary-strong: #146aa5;
    --upos-secondary: #7a4e2b;
    --upos-secondary-strong: #7a4e2b;
    --upos-secondary-tint: #f2eae3;
    --upos-on-strong: #ffffff;
    --upos-border: #dde3eb;
    --upos-control-border: #7a869a;
    --upos-focus: #175cd3;
    --upos-success: #067647;
    --upos-success-tint: #ecfdf3;
    --upos-warning: #7a2e0e;
    --upos-warning-tint: #fffaeb;
    --upos-danger: #b42318;
    --upos-danger-strong: #b42318;
    --upos-danger-tint: #fef3f2;
    --upos-info: #175cd3;
    --upos-info-tint: #eff8ff;
    --upos-shadow: 0 1px 2px rgb(23 43 77 / 6%), 0 2px 8px rgb(23 43 77 / 5%);
    --upos-scrim: rgb(23 43 77 / 45%);
    --upos-logo-plate: transparent;
}

[data-theme="dark"] {
    color-scheme: dark;
    --upos-background: #111b2a;
    --upos-surface: #1b293d;
    --upos-surface-muted: #25354a;
    --upos-text: #edf3fc;
    --upos-text-secondary: #c5d1e1;
    --upos-text-muted: #b2bfd2;
    --upos-primary: #8bc6f0;
    --upos-primary-hover: #a9d9f9;
    --upos-primary-tint: #223d56;
    --upos-secondary: #e2b18b;
    --upos-secondary-tint: #3b2c25;
    --upos-border: #44536a;
    --upos-control-border: #71839e;
    --upos-focus: #8bc6f0;
    --upos-success: #7ce4b0;
    --upos-success-tint: #173c2c;
    --upos-warning: #ffd69f;
    --upos-warning-tint: #3d2c1c;
    --upos-danger: #ffb4ad;
    --upos-danger-tint: #462723;
    --upos-info: #a4c8ff;
    --upos-info-tint: #253c59;
    --upos-shadow: 0 2px 8px rgb(0 0 0 / 25%);
    --upos-scrim: rgb(0 0 0 / 60%);
    /* Doc 33 section 3: the original logo sits on a light plate in the dark theme; it is never recoloured. */
    --upos-logo-plate: #ffffff;
}

[data-theme="gray"] {
    color-scheme: light;
    --upos-background: #e9ebed;
    --upos-surface: #f5f6f7;
    --upos-surface-muted: #e1e4e8;
    --upos-text: #202c3c;
    --upos-text-secondary: #3c4a5d;
    --upos-text-muted: #536174;
    --upos-border: #c4cbd3;
    --upos-control-border: #6b778c;
    --upos-primary-tint: #dfeaf3;
    --upos-secondary-tint: #e8e2dc;
    --upos-logo-plate: #ffffff;
}

/* Fixed sizes from doc 13 section 4.1 and the plan B brief: app bar 64, drawer 260, targets 44 (48 on a phone). */
:root {
    --upos-appbar: 64px;
    --upos-drawer: 260px;
    --upos-footer: 34px;
    --upos-target: 44px;
    --upos-radius-s: 8px;
    --upos-radius-m: 12px;
    --upos-radius-l: 16px;
}

@media (max-width: 767.98px) {
    :root {
        --upos-appbar: 56px;
        --upos-target: 48px;
    }
}