/* ClaimFlair corporate brand layer, proposed v1.0 (2026-11-03).
   Presentation only: workflow behavior, tenant scope, and safety controls are unchanged. */
:root {
  --brand-navy: #062b5d;
  --brand-electric-blue: #087ef4;
  --brand-cyan: #04bdef;
  --brand-emerald: #00a98a;
  --ink: #19384d;
  --ink-soft: #536981;
  --navy: var(--brand-navy);
  --navy-deep: #041f46;
  --blue: var(--brand-electric-blue);
  --blue-deep: #0756ad;
  --blue-soft: #eaf4ff;
  --aqua-soft: #e7f7f3;
  --aqua-ink: #006f5e;
  --surface: #ffffff;
  --canvas: #f4f8fb;
  --line: #d6e4ee;
  --line-strong: #9cb3c4;
  --focus: #0756ad;
  --shadow: 0 16px 42px rgb(6 43 93 / 10%);
}

body,
button,
select,
input,
textarea {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:is(h1, h2, h3, h4, h5, h6),
.empty-state h3,
.finding-copy h3,
.wordmark-mark {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:is(h1, h2, h3) {
  color: var(--brand-navy);
  font-weight: 750;
}

.topbar {
  min-height: 76px;
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  background: var(--surface);
}

/* The embedded guideline artwork is used as a sprite so the application can
   present the supplied mark as a compact horizontal header lockup. */
.brand-lockup {
  width: 234px;
  min-width: 220px;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  overflow: hidden;
  border-radius: 10px;
  background: #ffffff;
}

.brand-mark,
.brand-wordmark {
  position: relative;
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
}

.brand-mark {
  width: 64px;
  height: 44px;
}

.brand-mark img {
  position: absolute;
  top: -9.7px;
  left: -46.6px;
  width: 156.4px;
  height: 88.7px;
  max-width: none;
}

.brand-wordmark {
  width: 150px;
  height: 24px;
}

.brand-wordmark img {
  position: absolute;
  top: -98.2px;
  left: -53.2px;
  width: 249.4px;
  height: 141.4px;
  max-width: none;
}

.topbar-context,
.connection {
  color: var(--ink-soft);
}

.environment-badge {
  color: var(--blue-deep);
  background: var(--blue-soft);
  border-color: #a7ccef;
}

.connection-dot {
  background: var(--brand-emerald);
}

.appearance-toggle {
  color: var(--blue-deep);
  background: var(--surface);
  border-color: var(--line-strong);
}

.appearance-toggle:hover {
  color: #ffffff;
  background: var(--blue-deep);
}

.appearance-toggle:focus-visible {
  outline-color: var(--focus);
}

.safety-banner {
  color: var(--brand-navy);
  background: #eef7ff;
  border-color: #bddbf4;
}

.safety-icon,
.primary-button,
.admin-editor button[type="submit"] {
  color: #ffffff;
  background: var(--blue-deep);
  border-color: var(--blue-deep);
}

.primary-button:hover:not(:disabled),
.admin-editor button[type="submit"]:hover:not(:disabled) {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
}

.secondary-button,
.text-action,
.technical-details summary {
  color: var(--blue-deep);
}

.secondary-button {
  border-color: var(--blue-deep);
  background: var(--surface);
}

.eyebrow,
.field-help,
.sidebar-footnote,
.report-scope-caption {
  color: var(--ink-soft);
}

.shell-navigation button.is-active,
.admin-navigation button[aria-current="page"],
.case-section-navigation button[aria-pressed="true"],
.admin-families button[aria-pressed="true"] {
  color: var(--blue-deep);
  background: var(--blue-soft);
  border-color: var(--blue-deep);
}

.organized-workspace .report-workspace,
.task-panel,
.intelligence-chart-card,
.investigation-panel,
.case-overview,
.hosted-login > div {
  box-shadow: var(--shadow);
}

.report-metrics strong,
.insight-card > strong,
.secondary-metrics strong,
.case-money-grid strong {
  color: var(--brand-navy);
  font-variant-numeric: tabular-nums;
}

.svg-value,
.bar-track span,
.evidence-fill {
  fill: var(--brand-electric-blue);
  background: linear-gradient(90deg, var(--brand-electric-blue), var(--brand-emerald));
}

.boundary-card,
.financial-coverage,
.evidence-verified,
.quality-summary {
  color: var(--aqua-ink);
  background: var(--aqua-soft);
  border-color: #8dcdbf;
}

.shield {
  background: var(--aqua-ink);
}

footer {
  color: var(--ink-soft);
  background: var(--surface);
  border-top-color: var(--line);
}

footer strong {
  color: var(--brand-navy);
}

html[data-theme="dark"] {
  --ink: #e7f1f8;
  --ink-soft: #b6c7d6;
  --navy: #d7eaff;
  --navy-deep: #03172f;
  --blue: #69b5ff;
  --blue-deep: #a8d2ff;
  --blue-soft: #10365d;
  --aqua-soft: #0a3a35;
  --aqua-ink: #8ee4d2;
  --surface: #0d2239;
  --canvas: #06182b;
  --line: #294763;
  --line-strong: #55738d;
  --focus: #58ccff;
}

html[data-theme="dark"] :is(h1, h2, h3),
html[data-theme="dark"] .report-metrics strong,
html[data-theme="dark"] .insight-card > strong,
html[data-theme="dark"] .secondary-metrics strong,
html[data-theme="dark"] .case-money-grid strong,
html[data-theme="dark"] footer strong {
  color: #d7eaff;
}

html[data-theme="dark"] .topbar {
  color: var(--ink);
  background: var(--canvas);
  border-bottom-color: var(--line);
}

html[data-theme="dark"] .brand-lockup {
  background: #ffffff;
}

html[data-theme="dark"] .appearance-toggle {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line-strong);
}

html[data-theme="dark"] .appearance-toggle:hover {
  color: #ffffff;
  background: #0756ad;
}

html[data-theme="dark"] .environment-badge {
  color: #d7eaff;
  background: #10365d;
  border-color: #4778a9;
}

@media (max-width: 600px) {
  .topbar {
    min-height: 68px;
  }

  .brand-lockup {
    width: 220px;
  }
}

@media (max-width: 430px) {
  .brand-lockup {
    width: 174px;
    min-width: 174px;
  }

  .brand-wordmark {
    width: 98px;
  }
}

@media print {
  :root,
  html[data-theme="dark"] {
    --ink: #19384d;
    --ink-soft: #536981;
    --navy: #062b5d;
    --blue-deep: #0756ad;
    --surface: #ffffff;
    --canvas: #ffffff;
    --line: #d6e4ee;
  }
}