:root {
    color-scheme: light dark;

    /* 5-Level Strict Typographic Scale */
    --font-size-xs: 0.75rem;    /* 12px: Badges, eyebrows, timestamps */
    --font-size-sm: 0.875rem;   /* 14px: Secondary text, descriptions, hints */
    --font-size-base: 1rem;     /* 16px: Body text, inputs, buttons, dropdowns */
    --font-size-lg: 1.25rem;    /* 20px: Card titles, section headers */
    --font-size-xl: 1.75rem;    /* 28px: Main page titles (h1) */

    /* Form & Control Dimensions */
    --control-height: 2.75rem;  /* 44px: Comfortable modern height */
    --control-radius: 0.5rem;

    /* Base Surfaces & Layout */
    /* Light mode: warm paper stone; Dark mode: soft soothing charcoal */
    --bg-app: light-dark(#fafaf9, #141416);
    --bg-surface: light-dark(#ffffff, #1a1a1e);
    --bg-surface-elevated: light-dark(#ffffff, #222228);
    --bg-surface-subtle: light-dark(#f5f5f4, #17171b);
    --bg-surface-hover: light-dark(#e7e5e4, #282830);

    /* Typography - Soft Charcoal & Warm Paper Hierarchy */
    /* Light mode: #292524 body, #1C1917 headings, #57534E secondary, #78716C muted, #A8A29E subtle */
    /* Dark mode: #E2E2E5 body, #F4F4F6 headings, #A1A1AA secondary, #71717A muted, #52525B subtle */
    --text-main: light-dark(#292524, #e2e2e5);
    --text-headings: light-dark(#1c1917, #f4f4f6);
    --text-muted: light-dark(#57534E, #a1a1aa);
    --text-dim: light-dark(#78716c, #71717a);
    --text-subtle: light-dark(#a8a29e, #52525b);

    /* Borders & Lines */
    --border-color: light-dark(#e7e5e4, #27272e);
    --border-subtle: light-dark(#f5f5f4, #1f1f24);
    --border-strong: light-dark(#d6d3d1, #383842);
    --line: light-dark(#e7e5e4, #27272e);

    /* Brand / Accent - Balanced Soothing Blue */
    --brand-primary: light-dark(#2563eb, #60a5fa);
    --brand-primary-hover: light-dark(#1d4ed8, #93c5fd);
    --brand-primary-active: light-dark(#1e40af, #3b82f6);
    --brand-primary-text: #ffffff;

    /* Neutral & Secondary Buttons / Links */
    --btn-neutral-bg: light-dark(#2563eb, #2563eb);
    --btn-neutral-hover: light-dark(#1d4ed8, #1d4ed8);
    --btn-neutral-active: light-dark(#1e40af, #1e40af);
    --btn-neutral-text: #ffffff;

    --btn-secondary-bg: light-dark(#ffffff, #1a1a1e);
    --btn-secondary-border: light-dark(#d6d3d1, #383842);
    --btn-secondary-text: light-dark(#292524, #e2e2e5);
    --btn-secondary-hover-bg: light-dark(#f5f5f4, #282830);
    --btn-secondary-hover-border: light-dark(#a8a29e, #52525b);
    --btn-secondary-hover-text: light-dark(#1c1917, #f4f4f6);

    /* Inputs & Forms */
    --input-bg: light-dark(#ffffff, #17171b);
    --input-border: light-dark(#d6d3d1, #27272e);
    --input-text: light-dark(#292524, #e2e2e5);
    --input-placeholder: light-dark(#78716c88, #71717a88);
    --input-focus-border: light-dark(#2563eb, #60a5fa);
    --input-focus-ring: light-dark(rgba(37, 99, 235, 0.2), rgba(96, 165, 250, 0.25));

    /* Status Badges & Alerts */
    --status-success-bg: light-dark(#ecfdf5, #062e1b);
    --status-success-border: light-dark(#a7f3d0, #0d5c35);
    --status-success-text: light-dark(#065f46, #6ee7b7);

    --status-warning-bg: light-dark(#fffbeb, #382006);
    --status-warning-border: light-dark(#fde68a, #663908);
    --status-warning-text: light-dark(#92400e, #fcd34d);

    --status-error-bg: light-dark(#fef2f2, #360c0c);
    --status-error-border: light-dark(#fecaca, #631717);
    --status-error-text: light-dark(#991b1b, #fca5a5);

    --status-neutral-bg: light-dark(#f5f5f4, #222228);
    --status-neutral-text: light-dark(#57534e, #a1a1aa);

    --status-info-bg: light-dark(#eff6ff, #0b2744);
    --status-info-border: light-dark(#bfdbfe, #124b82);
    --status-info-text: light-dark(#1e40af, #93c5fd);

    /* Shadows */
    --card-shadow: light-dark(0 1px 3px 0 rgba(28, 25, 23, 0.05), 0 2px 6px 0 rgba(0, 0, 0, 0.35));
    --elevated-shadow: light-dark(0 10px 25px -5px rgba(28, 25, 23, 0.08), 0 12px 28px -4px rgba(0, 0, 0, 0.5));
}

html[data-theme="light"] {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    background-color: var(--bg-app);
    color: var(--text-main);
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: var(--font-size-base);
    line-height: 1.5;
    transition: background-color 0.2s ease, color 0.2s ease;
}

h1 {
    color: var(--text-headings);
    font-size: var(--font-size-xl);
    font-weight: 700;
}

h2 {
    color: var(--text-headings);
    font-size: var(--font-size-lg);
    font-weight: 700;
}

h3 {
    color: var(--text-headings);
    font-size: var(--font-size-base);
    font-weight: 600;
}

h4, h5, h6 {
    color: var(--text-headings);
    font-size: var(--font-size-sm);
}

h1:focus {
    outline: none;
}

/* Global Form Controls Styling */
input[type="text"],
input[type="email"],
input[type="password"],
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
select,
.input-text,
.input-select {
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
    border-radius: var(--control-radius);
    font: inherit;
    font-size: var(--font-size-base);
    min-height: var(--control-height);
    height: var(--control-height);
    padding: 0.65rem 0.95rem;
    width: 100%;
    box-sizing: border-box;
    display: block;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus,
select:focus,
.input-text:focus,
.input-select:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 2px var(--input-focus-ring);
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--status-success-border);
}

.invalid {
    outline: 1px solid var(--status-error-border);
}

.validation-message {
    color: var(--status-error-text);
    font-size: var(--font-size-sm);
    margin-top: 0.25rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--status-error-bg);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--status-error-text);
    font-size: var(--font-size-sm);
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* Global button-link styling for page links (excluding header/nav/special buttons) */
.button-link,
.site-main a:not(.brand):not(.tab-button):not(.download-btn):not(.shortcut-card):not(.space-tile):not(.space-title-link):not(.space-tile-action):not(.plain-link):not(.button-secondary):not(.table-action-btn):not(.tray-action-btn) {
    background: var(--btn-neutral-bg);
    border: 0;
    border-radius: var(--control-radius);
    color: var(--btn-neutral-text);
    cursor: pointer;
    display: inline-block;
    font: inherit;
    font-size: var(--font-size-base);
    font-weight: 600;
    padding: 0.65rem 1.25rem;
    min-height: var(--control-height);
    text-decoration: none;
    line-height: 1.4;
    transition: background-color 0.15s ease, transform 0.1s ease, color 0.15s ease;
}

.button-link:hover,
.site-main a:not(.brand):not(.tab-button):not(.download-btn):not(.shortcut-card):not(.space-tile):not(.space-title-link):not(.space-tile-action):not(.plain-link):not(.button-secondary):not(.table-action-btn):not(.tray-action-btn):hover {
    background: var(--btn-neutral-hover);
    color: var(--btn-neutral-text);
    text-decoration: none;
}

.button-link:active,
.site-main a:not(.brand):not(.tab-button):not(.download-btn):not(.shortcut-card):not(.space-tile):not(.space-title-link):not(.space-tile-action):not(.plain-link):not(.button-secondary):not(.table-action-btn):not(.tray-action-btn):active {
    background: var(--btn-neutral-active);
    transform: translateY(1px);
}