/* Tokens */
@import url("./blazor/themes/theme-modern.css") supports(color: light-dark(#000,#fff));
@import url("./blazor/themes/theme-compat.css") supports(not (color: light-dark(#000,#fff)));

/* Blazor components styles without css isolation */
@import url("./blazor/components/versioninfo.css");
@import url("./blazor/components/updatewizard.css");

/* Utilities */
@import url("./blazor/utilities.css");

:root {
    /* Tokens (stable) */
    --color-primary: #2eb2ab;
    --color-secondary: #ca3b6b;
    --color-success: #27ae60;
    --color-warn: #f39c12;
    --color-danger: #e74c3c;
    --color-inactive: #3498db;
    --radius-xl: 20px;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 10px;
    --radius-pill: 50px;
    --border-width: 1px;
    --icon-size-sm: 18px;
    --icon-size-md: 36px;
    --extension-icon: 40px;
    --space-xxs: 4px;
    --space-s: 8px;
    --space-m: 10px;
    --space-l: 12px;
    --space-xl: 14px;
    --space-2xl: 18px;
    --space-3xl: 20px;
    --font-size-xxs: 1rem;
    --font-size-xs: 12px;
    --font-size-s: 13px;
    --font-size-m: 16px;
    --font-size-l: 22px;
    --font-size-xl: 3rem;
    --container-max: 920px;
    --grid-gap: var(--space-2xl);
    --skel-radius: 10px;
    --skel-speed: 1.4s;
    /* Final Alias that consume the UI */
    --color-bg: var(--_color-bg);
    --color-bg-grad: var(--_color-bg-grad);
    --color-surface: var(--_color-surface);
    --color-section: var(--_color-section);
    --color-border: var(--_color-border);
    --color-text: var(--_color-text);
    --color-text-muted: var(--_color-text-muted);
    --shadow-card: var(--_shadow-card);
    --shadow-inset: var(--_shadow-inset);
    --skel-base: var(--_skel-base);
    --skel-highlight: var(--_skel-highlight);
    --skel-border: var(--_skel-border);
    --scrollbar-color: var(--_scrollbar-color);
}

body[blazor="true"] {
    color: var(--color-text);
    margin: 0;
    background: linear-gradient(180deg, var(--color-bg), var(--color-bg-grad));
}

body[blazor="true"] #mainContent {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
}