stack/assets/css/fhirworx.css

/* HTI-5 — fhirworx design system
   Single source of truth for the colour palette.
   Design: Federal Register Meets Data Journalism
   Inspired by ProPublica, The Marshall Project, and the Federal Register

   When changing a token here, propagate to the service-specific files:
     inject.css, dashboard.css, gitea.css, woodpecker.css, marimo.css */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Core palette ──────────────────────────────────────────── */
  /* Off-white background, near-black text */
  --background: #F7F5F0;
  --foreground: #1A1A18;

  /* Card: slightly warmer white */
  --card: #FAFAF7;
  --card-foreground: #1A1A18;

  --popover: #FAFAF7;
  --popover-foreground: #1A1A18;

  /* Primary: deep federal blue/navy */
  --primary: #1C2B3A;
  --primary-foreground: #F7F5F0;

  --secondary: #EDEBE6;
  --secondary-foreground: #2D2D2B;

  --muted: #EDEBE6;
  --muted-foreground: #6B6B68;

  --accent: #EDEBE6;
  --accent-foreground: #1A1A18;

  --destructive: #C0392B;
  --destructive-foreground: #F7F5F0;

  --border: #D4D0C8;
  --input: #D4D0C8;
  --ring: #1C2B3A;

  --radius: 0.2rem;

  /* ── Sidebar: deep federal navy ────────────────────────────── */
  --sidebar: #1C2B3A;
  --sidebar-foreground: #B8C5D0;
  --sidebar-primary: #5B8FA8;
  --sidebar-primary-foreground: #F7F5F0;
  --sidebar-accent: #253748;
  --sidebar-accent-foreground: #EEE9E0;
  --sidebar-border: #253748;
  --sidebar-ring: #5B8FA8;

  /* ── Chart palette: indigo scale + teal + amber ────────────── */
  --chart-1: #6B7FD7;   /* indigo medium   */
  --chart-2: #4A5CB8;   /* indigo dark     */
  --chart-3: #2E3D8F;   /* indigo deep     */
  --chart-4: #2E8B6E;   /* teal (support)  */
  --chart-5: #C8702A;   /* amber (opposition) */

  /* ── Typography ─────────────────────────────────────────────── */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;
}

/* ── Editorial base styles ────────────────────────────────── */

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--foreground);
}

code, kbd, pre, .font-mono {
  font-family: var(--font-mono);
}

/* ── Editorial component classes ──────────────────────────── */

/* Rule lines — structural dividers, not borders */
.rule-line {
  border: none;
  border-top: 3px solid var(--foreground);
  margin-bottom: 1rem;
}

.rule-line-thin {
  border: none;
  border-top: 1px solid var(--border);
  margin-bottom: 1rem;
}

/* Eyebrow — canonical mono label treatment for metadata, IDs, KPI labels */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-foreground);
}

/* Pull quote — editorial emphasis */
.pull-quote {
  border-left: 3px solid var(--primary);
  padding-left: 1rem;
  font-style: italic;
  color: var(--muted-foreground);
  font-family: var(--font-body);
}

/* Prose — long-form reading columns */
.prose {
  max-width: 65ch;
}

.prose p {
  line-height: 1.75;
  color: var(--foreground);
}

/* ── WCAG 2.2 AA — Accessibility ──────────────────────────── */

/* Focus indicators (2.4.7, 2.4.11) */
:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px !important;
}

/* Reduced motion (2.3.3) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Minimum target size (2.5.8) */
button, [role="button"], a, input, select, textarea {
  min-height: 24px;
  min-width: 24px;
}