/* ============================================================
Logbook — brand theme (light only)
------------------------------------------------------------
The Logbook portal look, loaded by , which
resolves to /css/logbook-base.css. Replaces the ScriptWise-era "cayman"
experiment as the active theme; cayman-*, scriptwise-* and the older
material3/fluent files remain in wwwroot/css untouched, so reverting is a
one-word change in App.razor plus swapping the chrome .
── Where the palette comes from ────────────────────────────
It matches the public Logbook site (Marketing/wwwroot), which §9 calls the
placeholder brand until real brand work is done:
petrol teal — the sea met by the road. Primary actions, links, rules.
ink navy — the registry ledger. Sidebar, headings, secondary actions.
signal amber— indicator/odometer amber. Accent only: the active nav
marker, focus rings. Never body text (mid-luminance).
Status hues line up with the public report's badges (critical red, info
blue) so a vehicle's alerts read the same on both sides of the fence.
Light-only by design, like cayman before it: MainLayout renders no
RadzenAppearanceToggle, and no "logbook-dark" stylesheet exists.
============================================================ */
@import url("/_content/Radzen.Blazor/css/default-base.css");
:root {
/* ---- Logbook palette ---- */
--lb-teal: #0b6e6e; /* petrol — primary */
--lb-teal-deep: #085757; /* pressed / hover */
--lb-teal-ink: #063f3f; /* deepest teal */
--lb-teal-tint: #d6ebe9; /* selected rows, subtle fills */
--lb-teal-wash: #edf5f4; /* table headers, hover */
--lb-ink: #14213d; /* ledger ink — sidebar, headings (matches the public site) */
--lb-ink-deep: #0e1730; /* sidebar active */
--lb-ink-tint: #dde3ee;
/* Amber is mid-luminance (~2.3:1 on white), so it never carries text; the
darker amber-ink is the text-safe form used by warnings. Bright amber
lives on ink navy, where it reads at ~8:1. */
--lb-amber: #eaa63a;
--lb-amber-bright: #ffbf57;
--lb-amber-ink: #7c5304;
--lb-green: #1b7a4a;
--lb-green-tint: #ddeee4;
--lb-red: #c62828; /* the public report's "critical" */
--lb-red-tint: #f9e0e0;
/* ---- Neutrals ----
Cooled slightly toward the ink so greys sit with the palette. */
--rz-base: #dfe4ec;
--rz-base-50: #fbfcfd;
--rz-base-100: #f5f7fa;
--rz-base-200: #ebeff5;
--rz-base-300: #dfe4ec;
--rz-base-400: #c7cfda;
--rz-base-500: #9aa5b5;
--rz-base-600: #6f7a8c;
--rz-base-700: #55606f;
/* 800/900 drive the sidebar and its active state — ink, not grey. */
--rz-base-800: var(--lb-ink);
--rz-base-900: var(--lb-ink-deep);
--rz-base-light: #f5f7fa;
--rz-base-lighter: #ffffff;
--rz-base-dark: #55606f;
--rz-base-darker: var(--lb-ink-deep);
/* ---- Primary: petrol teal ---- */
--rz-primary: var(--lb-teal);
--rz-primary-light: var(--lb-teal-tint);
--rz-primary-lighter: rgba(11, 110, 110, 0.10);
--rz-primary-dark: var(--lb-teal-deep);
--rz-primary-darker: var(--lb-teal-ink);
/* ---- Secondary: ledger ink ----
Radzen fills secondary buttons and puts white text on them; ink navy
clears AA at ~14:1 and pairs naturally with teal primaries. */
--rz-secondary: var(--lb-ink);
--rz-secondary-light: var(--lb-ink-tint);
--rz-secondary-lighter: rgba(20, 33, 61, 0.10);
--rz-secondary-dark: var(--lb-ink-deep);
--rz-secondary-darker: #080d1c;
/* ---- Status ---- */
--rz-success: var(--lb-green);
--rz-success-light: var(--lb-green-tint);
--rz-success-lighter: rgba(27, 122, 74, 0.10);
--rz-success-dark: #145e39;
--rz-success-darker: #0e442a;
--rz-danger: var(--lb-red);
--rz-danger-light: var(--lb-red-tint);
--rz-danger-lighter: rgba(198, 40, 40, 0.10);
--rz-danger-dark: #a32020;
--rz-danger-darker: #7c1818;
/* Warning = text-safe amber-ink, so a caution never looks like the
decorative accent. */
--rz-warning: var(--lb-amber-ink);
--rz-warning-light: #f9ecd2;
--rz-warning-lighter: rgba(124, 83, 4, 0.12);
--rz-warning-dark: #634203;
--rz-warning-darker: #4a3102;
--rz-info: #1565c0; /* the public report's "info" */
--rz-info-light: #dbe8f8;
--rz-info-lighter: rgba(21, 101, 192, 0.10);
--rz-info-dark: #104e94;
--rz-info-darker: #0c3a6e;
/* ---- Surfaces and text ---- */
--rz-body-background-color: #f5f7fa;
--rz-base-background-color: #ffffff;
--rz-layout-body-background-color: #f5f7fa;
--rz-panel-background-color: #ffffff;
--rz-text-color: #101c2e;
--rz-text-secondary-color: #55606f;
--rz-text-disabled-color: #8b95a3;
--rz-text-title-color: var(--lb-ink);
--rz-text-h1-color: var(--lb-ink);
--rz-text-h2-color: var(--lb-ink);
--rz-text-h3-color: var(--lb-ink);
--rz-text-h4-color: var(--lb-ink);
--rz-text-h5-color: var(--lb-ink);
--rz-text-h6-color: var(--lb-ink);
--rz-link-color: var(--lb-teal);
--rz-link-hover-color: var(--lb-teal-deep);
--rz-border-color: #dfe4ec;
--rz-input-border-color: #c7cfda;
/* ---- Header and sidebar ---- */
--rz-header-background-color: #ffffff;
--rz-header-color: var(--lb-ink);
--rz-footer-background-color: #ffffff;
--rz-panel-menu-item-active-indicator: var(--lb-amber-bright);
--rz-panel-menu-item-hover-background-color: rgba(255, 255, 255, 0.08);
/* ---- Shape ----
Crisp geometry, carried over: a registry of record should read filed,
not consumer. */
--rz-border-radius: 3px;
--rz-border-radius-1: 2px;
--rz-border-radius-2: 3px;
--rz-border-radius-3: 6px;
--rz-border-radius-4: 10px;
/* ---- Typography ---- Montserrat is bundled in app.css. */
--rz-text-font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;
--rz-body-font-size: 0.875rem;
/* ---- Chart series ----
Teal → ink → amber-ink in order of brand prominence, extended with
separable tints (the odometer chart and dashboards read off these). */
--rz-series-1: #0b6e6e;
--rz-series-2: #14213d;
--rz-series-3: #b07c17;
--rz-series-4: #4d94a6;
--rz-series-5: #5a6c96;
--rz-series-6: #1b7a4a;
--rz-series-7: #9fb8c8;
--rz-series-8: #55606f;
}