@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --paper:        #faf8f3;
    --paper-sunk:   #f3f0e8;
    --surface:      #ffffff;
    --ink:          #1a1a1a;
    --ink-soft:     #4a4a4a;
    --ink-muted:    #7a7468;
    --rule:         #e6e1d4;
    --rule-strong:  #c9c2b1;
    --accent:       #2f5d62;
    --accent-hover: #244b50;
    --accent-soft:  #e3ecec;
    --good:         #2f6a3a;
    --good-soft:    #e6efe2;
    --bad:          #8a2a2a;
    --bad-soft:     #f3e3e1;
    --warn:         #8a6a1f;
    --warn-soft:    #f5ecd6;
}

html, body {
    background-color: var(--paper);
    color: var(--ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

code, .font-monospace, kbd, samp {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}

h2 {
    font-size: 1.5rem;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 0.6rem;
    margin-bottom: 1.4rem;
}

h4 {
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
}

a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.1s ease;
}

a:hover {
    color: var(--accent-hover);
    border-bottom-color: var(--accent-hover);
}

/* Buttons -------------------------------------------------- */
.btn {
    border-radius: 3px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: background-color 0.1s ease, border-color 0.1s ease;
}

.btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}

.btn:focus, .btn:active:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.18rem rgba(47, 93, 98, 0.22);
    border-color: var(--accent);
    outline: none;
}

/* Forms ---------------------------------------------------- */
.form-control, .form-select {
    background-color: var(--surface);
    border: 1px solid var(--rule-strong);
    border-radius: 3px;
    color: var(--ink);
    font-size: 0.9rem;
}

.form-label {
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    margin-bottom: 0.25rem;
}

/* Tables --------------------------------------------------- */
.table {
    color: var(--ink);
    --bs-table-hover-bg: var(--paper-sunk);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--rule);
}

.table thead th {
    background-color: var(--paper-sunk);
    border-bottom: 1px solid var(--rule-strong);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-muted);
}

.table-light, .table > thead.table-light th {
    background-color: var(--paper-sunk);
    --bs-table-bg: var(--paper-sunk);
}

.table-warning, .table > tbody > tr.table-warning > * {
    --bs-table-bg: var(--warn-soft);
    background-color: var(--warn-soft);
    color: var(--ink);
}

/* Callouts (replace Bootstrap alerts where we use them) ---- */
.callout {
    border-left: 4px solid var(--rule-strong);
    background-color: var(--surface);
    padding: 0.9rem 1rem;
    border-radius: 0 3px 3px 0;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.callout-icon {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 0.05rem;
    font-weight: 600;
}

.callout-title {
    font-weight: 600;
    margin-bottom: 0.1rem;
}

.callout-body {
    font-size: 0.88rem;
    color: var(--ink-soft);
}

.callout-good { border-left-color: var(--good); background-color: var(--good-soft); }
.callout-good .callout-icon { color: var(--good); }
.callout-bad  { border-left-color: var(--bad);  background-color: var(--bad-soft); }
.callout-bad  .callout-icon { color: var(--bad); }
.callout-warn { border-left-color: var(--warn); background-color: var(--warn-soft); }
.callout-warn .callout-icon { color: var(--warn); }

.alert-danger {
    background-color: var(--bad-soft);
    border: 1px solid var(--bad);
    color: var(--bad);
    border-radius: 3px;
}

/* Misc ----------------------------------------------------- */
.text-muted {
    color: var(--ink-muted) !important;
}

.content {
    padding-top: 1.6rem;
    padding-bottom: 3rem;
    max-width: 1200px;
}

hr {
    border-color: var(--rule);
    opacity: 1;
}

::selection {
    background-color: var(--accent-soft);
    color: var(--ink);
}

h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--good); }
.invalid { outline: 1px solid var(--bad); }
.validation-message { color: var(--bad); }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1.25rem;
    color: white;
}

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