/* Global styles — imports tokens.css via index.html, applies base typography and layout. */

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

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: var(--jb-font-family-sans);
    font-size: var(--jb-text-body-md);
    line-height: var(--jb-text-leading-normal);
    color: var(--jb-color-text-primary);
    background: var(--jb-color-surface-canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--jb-color-text-link);
    text-decoration: none;
}
a:hover { color: var(--jb-color-text-link-hover); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--jb-space-sm) 0; line-height: var(--jb-text-leading-tight); }
h1 { font-size: var(--jb-text-heading-xl); font-weight: var(--jb-text-weight-semibold); }
h2 { font-size: var(--jb-text-heading-lg); font-weight: var(--jb-text-weight-semibold); }
h3 { font-size: var(--jb-text-heading-md); font-weight: var(--jb-text-weight-semibold); }

p { margin: 0 0 var(--jb-space-md) 0; }
p:last-child { margin-bottom: 0; }

.jb-splash {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: var(--jb-space-lg);
}
.jb-splash__logo {
    font-size: var(--jb-text-heading-lg);
    font-weight: var(--jb-text-weight-bold);
    color: var(--jb-color-brand-primary);
}
.jb-splash__spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--jb-color-neutral-200);
    border-top-color: var(--jb-color-brand-primary);
    border-radius: 50%;
    animation: jb-spin 0.8s linear infinite;
}
@keyframes jb-spin { to { transform: rotate(360deg); } }

#blazor-error-ui {
    background: var(--jb-color-status-error-bg);
    color: var(--jb-color-status-error);
    bottom: 0;
    box-shadow: var(--jb-shadow-md);
    display: none;
    left: 0;
    padding: var(--jb-space-sm) var(--jb-space-lg);
    position: fixed;
    width: 100%;
    z-index: var(--jb-z-toast);
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: var(--jb-space-md);
    top: var(--jb-space-xs);
}

.jb-stack { display: flex; flex-direction: column; gap: var(--jb-space-md); }
.jb-cluster { display: flex; gap: var(--jb-space-sm); align-items: center; flex-wrap: wrap; }
.jb-muted { color: var(--jb-color-text-muted); }
.jb-text-sm { font-size: var(--jb-text-body-sm); }
.jb-text-xs { font-size: var(--jb-text-body-xs); }