/* ── Structural design tokens ──────────────────────────────── */
:root {
    /* Surfaces */
    --color-background-primary:   #ffffff;
    --color-background-secondary: #f4f4f5;
    --color-background-tertiary:  #e4e4e7;

    /* Text */
    --color-text-primary:         #09090b;
    --color-text-secondary:       #52525b;
    --color-text-tertiary:        #a1a1aa;

    /* Borders (always 0.5px–1px) */
    --color-border-tertiary:      #e4e4e7;
    --color-border-secondary:     #d4d4d8;

    /* Accent — indigo */
    --color-accent:               #4f46e5;
    --color-accent-hover:         #4338ca;
    --color-accent-light:         #eef2ff;

    /* Sidebar — near-black zinc */
    --color-sidebar-bg:           #09090b;
    --color-sidebar-text:         #71717a;
    --color-sidebar-active:       #fafafa;
    --color-sidebar-hover:        #18181b;
    --color-sidebar-border:       #18181b;

    /* Tokens */
    --radius-sm:    4px;
    --radius-md:    8px;
    --radius-lg:    12px;
    --shadow-sm:    0 1px 2px rgba(0,0,0,.05);
    --shadow-md:    0 4px 16px rgba(0,0,0,.06);
    --font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
    --sidebar-width: 240px;
}

/* ── Reset & base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--color-text-primary);
    background: var(--color-background-secondary);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }

/* ── Typography ────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-heading); }

h1 { font-size: 1.75rem;  font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
h2 { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: 1.125rem; font-weight: 600; }
h4 { font-size: 1rem;     font-weight: 600; }

p  { line-height: 1.6; color: var(--color-text-secondary); }

/* ── Card ──────────────────────────────────────────────────── */
.card {
    background: var(--color-background-primary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

/* ── Button ────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background 0.15s, opacity 0.15s;
}

.btn-primary {
    background: var(--color-accent);
    color: #fff;
}
.btn-primary:hover  { background: var(--color-accent-hover); }
.btn-primary:active { opacity: 0.9; }

.btn-ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-tertiary);
}
.btn-ghost:hover { background: var(--color-background-secondary); }

/* ── Form controls ─────────────────────────────────────────── */
.input {
    width: 100%;
    padding: 0.6rem 0.875rem;
    border: 1px solid var(--color-border-tertiary);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-family: var(--font-sans);
    color: var(--color-text-primary);
    background: var(--color-background-primary);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}
.input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.input::placeholder { color: var(--color-text-tertiary); }

/* ── Divider ───────────────────────────────────────────────── */
.divider {
    height: 1px;
    background: var(--color-border-tertiary);
    margin: 1.5rem 0;
}

/* ── Blazor error ──────────────────────────────────────────── */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-sidebar-bg);
    color: var(--color-background-secondary);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    box-shadow: var(--shadow-md);
    z-index: 9999;
    gap: 1rem;
    align-items: center;
}
#blazor-error-ui .reload { color: #93c5fd; margin-left: 0.5rem; }
#blazor-error-ui .dismiss { cursor: pointer; opacity: 0.6; margin-left: 0.75rem; }

.blazor-error-boundary { display: none; }