/* Robin-inspired Custom Theme for Fluent UI Blazor */

:root {
    /* Robin-inspired colors (tokens are managed by Fluent; we only keep our custom palette vars) */
    --robin-orange: #e67e22;
    --robin-red: #c0392b;
    --robin-brown: #8b4513;
    --robin-dark-brown: #654321;
    --robin-cream: #f4f1e8;
    --robin-sage: #87a96b;
    --robin-slate: #475569;
    --robin-warm-white: #fdfcf9;
}

/* Pre-boot/background base color in Robin beige (boot-only) */
body.booting {
    background-color: var(--robin-cream);
}

/* Token-based component styling */
.card-token {
    background: var(--neutral-layer-card-container);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: var(--layer-corner-radius);
    padding: 1rem;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--neutral-foreground-rest) 10%, transparent);
}

.header-token {
    background: var(--accent-fill-rest);
    padding: 1rem 2rem;
    border-radius: var(--control-corner-radius) var(--control-corner-radius) 0 0;
}

/* Footer links use neutral/contrast tokens to adapt */
.footer-link {
    color: var(--neutral-foreground-rest);
    text-decoration: none;
}

.footer-link:hover {
    text-decoration: underline;
}

/* Navigation styling */
.nav-token {
    /* Use design tokens so it adapts to dark/light and custom accent */
    background: var(--neutral-layer-2);
    border-right: 3px solid var(--accent-fill-rest);
}

.nav-item-token {
    color: var(--neutral-foreground-rest);
    border-radius: var(--control-corner-radius);
    margin: 0.25rem;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.nav-item-token:hover {
    background: color-mix(in srgb, var(--accent-fill-rest) 12%, transparent);
}

.nav-active,
.nav-item-token.active {
    background: var(--accent-fill-rest);
}

.nav-item-token:focus-visible {
    outline: 2px solid var(--accent-fill-hover);
    outline-offset: 2px;
}

/* Footer styling */
.footer-token {
    background: var(--neutral-layer-4);
    color: var(--neutral-foreground-rest);
    border-top: 2px solid var(--accent-fill-rest);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--robin-cream);
}

::-webkit-scrollbar-thumb {
    background: var(--robin-brown);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--robin-dark-brown);
}

/* Firefox scrollbar colors */
html {
    scrollbar-color: var(--robin-brown) var(--robin-cream);
    scrollbar-width: thin;
}

/* Pre-boot Blazor spinner themed for Robin colors */
.loading-progress circle {
    /* base track */
    stroke: color-mix(in srgb, var(--robin-brown) 25%, transparent);
}

.loading-progress circle:last-child {
    /* progress arc */
    stroke: var(--robin-brown);
}

.loading-progress-text {
    color: var(--robin-brown);
}

/* Pre-boot brand block */
.boot-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 12vh;
    color: var(--neutral-foreground-rest);
}

.boot-logo {
    filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--neutral-foreground-rest) 20%, transparent));
    border-radius: 16px;
}

.boot-title {
    font-family: var(--body-font, system-ui, sans-serif);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--robin-brown);
}