/* reports-ui design tokens
   Hex values pulled directly from templates/flow_theory_pdf_template.py and
   templates/ai_audit_report_template.py so severity/phase colors read
   identically to the PDF/PPTX a client has already seen. Do not hand-tune
   a value here without updating it there too, or vice versa. */

:root {
  /* brand */
  --navy: #0d1b2e;
  --cyan: #00b4d8;
  --dark-blue: #1a2f4e;
  --mid-blue: #1e3a5f;
  --light-blue-bg: #e8f4fb;

  /* body text */
  --body-dark: #1a2535;
  --body-mid: #4a5568;
  --rule-gray: #d0dce8;
  --table-alt: #f4f8fb;

  /* severity: critical=red, high=orange, medium=amber, low=green
     exact match to ai_audit_report_template.py SEVERITY_COLORS */
  --red: #e74c3c;
  --red-bg: #fdf0ef;
  --red-light: #f5b7b1;
  --orange: #f4a100;
  --orange-bg: #fff8e6;
  --orange-light: #f4c76b;
  --amber: #f39c12;
  --amber-bg: #fef9e7;
  --amber-light: #f9e4b7;
  --green: #27ae60;
  --green-bg: #eafaf1;
  --green-light: #a9dfbf;

  /* phase: 1=green, 2=cyan, 3=purple — exact match to PHASE_COLORS */
  --purple: #8e44ad;
  --purple-bg: #f5eef8;

  /* dashboard-only token, no PDF equivalent (only appears in the PPTX
     opportunity-matrix "reconsider" quadrant) */
  --muted: #6b7280;
  --muted-bg: #f3f4f6;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius: 0;              /* sharp corners throughout, matches PDF/PPTX */
  --border-hairline: 0.5px solid var(--rule-gray);
  --accent-bar-w: 4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: #0a1420;
    --card-bg: #101d30;
    --text-primary: #e8f0f7;
    --text-secondary: #a0b4c4;
    --border-color: #24344a;
  }
}
@media (prefers-color-scheme: light) {
  :root {
    --page-bg: #f6f9fb;
    --card-bg: #ffffff;
    --text-primary: var(--body-dark);
    --text-secondary: var(--body-mid);
    --border-color: var(--rule-gray);
  }
}
:root[data-theme="dark"] {
  --page-bg: #0a1420;
  --card-bg: #101d30;
  --text-primary: #e8f0f7;
  --text-secondary: #a0b4c4;
  --border-color: #24344a;
}
:root[data-theme="light"] {
  --page-bg: #f6f9fb;
  --card-bg: #ffffff;
  --text-primary: var(--body-dark);
  --text-secondary: var(--body-mid);
  --border-color: var(--rule-gray);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--page-bg);
  color: var(--text-primary);
}

/* --- severity / phase badge chips, sharp corners, uppercase, bold --- */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius);
}
.badge-critical { color: var(--red);    background: var(--red-bg);    border: 1px solid var(--red-light); }
.badge-high     { color: var(--orange); background: var(--orange-bg); border: 1px solid var(--orange-light); }
.badge-medium   { color: var(--amber);  background: var(--amber-bg);  border: 1px solid var(--amber-light); }
.badge-low      { color: var(--green);  background: var(--green-bg);  border: 1px solid var(--green-light); }

.badge-phase-1 { color: var(--green); background: var(--green-bg); border: 1px solid var(--green-light); }
.badge-phase-2 { color: var(--cyan);  background: var(--light-blue-bg); border: 1px solid var(--cyan); }
.badge-phase-3 { color: var(--purple); background: var(--purple-bg); border: 1px solid var(--purple); }

/* --- card: 4pt colored left-accent bar, hairline border, no shadow --- */
.card {
  background: var(--card-bg);
  border: var(--border-hairline);
  border-left-width: var(--accent-bar-w);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 14px;
}
.card-accent-critical { border-left-color: var(--red); }
.card-accent-high     { border-left-color: var(--orange); }
.card-accent-medium   { border-left-color: var(--amber); }
.card-accent-low      { border-left-color: var(--green); }
.card-accent-phase-1  { border-left-color: var(--green); }
.card-accent-phase-2  { border-left-color: var(--cyan); }
.card-accent-phase-3  { border-left-color: var(--purple); }

.card-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.card-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}