/* ============================================================
   Asymmetric Health — Brand Tokens & Core Components
   Source of truth: brand/asymmetric_health_style_reference_04_30_2026.html
   Generated: 04/30/2026 (v1.0)
   ------------------------------------------------------------
   Import this file at the top of the global stylesheet for the
   web app. It defines design tokens (CSS custom properties) and
   the core component styles (buttons, badges, cards, inputs).
   ============================================================ */

/* Fonts — bundled locally under /static/fonts/. Variable fonts cover all
   weights/styles in a single file. No CDN dependency, no network egress
   required at page-load time. Self-hosted to keep the render deterministic
   between local dev and Cloud Run, and to avoid Google Fonts in HIPAA-
   adjacent surfaces. */
@font-face {
    font-family: 'Crimson Pro';
    src: url('fonts/CrimsonPro.ttf');
    font-weight: 100 900;
    font-style: normal;
}
@font-face {
    font-family: 'Crimson Pro';
    src: url('fonts/CrimsonPro-Italic.ttf');
    font-weight: 100 900;
    font-style: italic;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans.ttf');
    font-weight: 100 900;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Italic.ttf');
    font-weight: 100 900;
    font-style: italic;
}

/* ---------- Design tokens ---------- */
:root {
  /* Logomark — replace with the hosted asset URL in production. */
  --logomark-img: none;

  /* Surface (dark) */
  --color-base-100: #0a0e14;     /* page background */
  --color-base-200: #07090d;     /* card / surface */
  --color-base-300: #050709;     /* recessed */
  --color-base-content: #ecedef; /* primary text */

  /* Text opacity tiers on dark */
  --color-muted: rgba(236, 237, 239, 0.65);   /* body / lede / descriptions */
  --color-muted-2: rgba(236, 237, 239, 0.4);  /* captions, helper text */

  /* Borders */
  --color-border: rgba(236, 237, 239, 0.1);
  --color-border-strong: rgba(236, 237, 239, 0.2);

  /* Brand */
  --color-primary: #09C6F0;          /* cyan, primary actions */
  --color-primary-content: #06141a;
  --color-secondary: #E28112;        /* orange, secondary CTAs */
  --color-secondary-content: #fff8f0;
  --color-accent: #6070FC;           /* purple, accent highlights */
  --color-accent-content: #fbfaff;

  /* Status */
  --color-success: #69FF91;
  --color-info: #09C6F0;
  --color-warning: #E28112;
  --color-error: #ff5b4f;            /* equivalent to oklch(65% 0.20 25) */

  /* Brand gradient — green → cyan → purple. Use sparingly:
     wordmark fill, hero glow orbs, gradient buttons, gradient borders. */
  --brand-gradient: linear-gradient(90deg, #69FF91 0%, #09C6F0 50%, #6070FC 100%);
  --gradient-dark: linear-gradient(135deg, #0a0e14 0%, #0d1419 50%, #0a0e14 100%);

  /* Radius scale */
  --radius-field: 0.375rem;   /* buttons, inputs, chips (6px) */
  --radius-box:   0.625rem;   /* cards, surfaces (10px) */
  --radius-pill:  9999px;     /* pills, badges */

  /* Spacing scale — 4px increments doubling outward */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* Typography */
  --font-display: 'Crimson Pro', Georgia, serif;
  --font-body:    'Open Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Per-theme accent tints. Dark default uses the same hex as the brand
     accent; light theme overrides darken these for AA contrast on white
     fills. Used by badges, lab pills, code, dashboard hover, etc. */
  --color-primary-tint: var(--color-primary);
  --color-secondary-tint: var(--color-secondary);
  --color-accent-tint: var(--color-accent);
  --color-success-tint: var(--color-success);
  --color-error-tint: var(--color-error);

  /* Lab status palette — used by .pb-lab-pct, .enc-viz-lab-pct, and the
     bell-curve markers in encounter.html. Each color has a text value,
     a soft fill (pill background), a stronger fill (marker bodies on the
     curve), and a border. Light mode overrides darken text and slightly
     strengthen fills for white-background legibility. */
  --lab-green-text:        #69FF91;
  --lab-green-fill:        rgba(105, 255, 145, 0.18);
  --lab-green-fill-strong: rgba(105, 255, 145, 0.30);
  --lab-green-border:      rgba(105, 255, 145, 0.45);

  --lab-yellow-text:        #FFD980;
  --lab-yellow-stroke:      #FFD466;
  --lab-yellow-fill:        rgba(255, 212, 102, 0.18);
  --lab-yellow-fill-strong: rgba(255, 212, 102, 0.30);
  --lab-yellow-border:      rgba(255, 212, 102, 0.45);

  --lab-red-text:        #FF8A82;
  --lab-red-fill:        rgba(255, 91, 79, 0.18);
  --lab-red-fill-strong: rgba(255, 91, 79, 0.30);
  --lab-red-border:      rgba(255, 91, 79, 0.45);
}

/* ---------- Light theme overrides ----------
   Activated when the document has data-theme="light". Surface and text
   tokens flip; brand accent hexes stay the same so badges, buttons, and
   gradient accents render identically in both modes. The *-tint variables
   override accent text colors used inside light-tinted pills so they meet
   contrast on white. */
[data-theme="light"] {
  --color-base-100: #f7f8fa;
  --color-base-200: #ffffff;
  --color-base-300: #eef0f3;
  --color-base-content: #0a0e14;

  --color-muted: rgba(10, 14, 20, 0.65);
  --color-muted-2: rgba(10, 14, 20, 0.45);

  --color-border: rgba(10, 14, 20, 0.10);
  --color-border-strong: rgba(10, 14, 20, 0.18);

  --gradient-dark: linear-gradient(135deg, #f7f8fa 0%, #eef0f3 50%, #f7f8fa 100%);

  /* Darker accent text for readability on light backgrounds. */
  --color-primary-tint: #0a8aac;
  --color-secondary-tint: #b86609;
  --color-accent-tint: #4654d1;
  --color-success-tint: #1f8443;
  --color-error-tint: #c8362c;

  /* Lab palette — darker text/strokes and slightly stronger background
     tints so green/yellow/red pills + bell-curve markers stay legible
     on white. Yellow shifts to a true amber since pure yellow on white
     is unreadable. */
  --lab-green-text:        #1f8443;
  --lab-green-fill:        rgba(105, 255, 145, 0.30);
  --lab-green-fill-strong: rgba(105, 255, 145, 0.45);
  --lab-green-border:      rgba(31, 132, 67, 0.50);

  --lab-yellow-text:        #a86b00;
  --lab-yellow-stroke:      #a86b00;
  --lab-yellow-fill:        rgba(255, 187, 51, 0.30);
  --lab-yellow-fill-strong: rgba(255, 187, 51, 0.45);
  --lab-yellow-border:      rgba(168, 107, 0, 0.50);

  --lab-red-text:        #c8362c;
  --lab-red-fill:        rgba(255, 91, 79, 0.25);
  --lab-red-fill-strong: rgba(255, 91, 79, 0.40);
  --lab-red-border:      rgba(200, 54, 44, 0.50);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--color-base-100);
  color: var(--color-base-content);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}

/* Type scale (matches reference) */
.t-h1   { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 800; }
.t-h2   { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; }
.t-h3   { font-size: 1.5rem;  font-weight: 700; }
.t-h4   { font-size: 1.25rem; font-weight: 600; }
.t-lede { font-size: 1.15rem; color: var(--color-muted); }
.t-body { font-size: 1rem; }
.t-small{ font-size: 0.875rem; color: var(--color-muted); font-weight: 500; }
.t-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.85em;
}
code {
  background: var(--color-base-300);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  color: var(--color-primary-tint);
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Wordmark ---------- */
.wordmark { font-family: var(--font-display); letter-spacing: -0.01em; }
.wordmark .a { font-weight: 600; }
.wordmark .h {
  font-weight: 800;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logomark { background: var(--logomark-img) center/contain no-repeat; display: inline-block; }
.logomark.placeholder { background: var(--brand-gradient); border-radius: 50%; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.65rem 1.2rem;
  border-radius: var(--radius-field);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .25s ease, background .2s ease, color .2s ease;
  font-family: inherit;
  text-decoration: none;
}
.btn-lg { padding: 0.85rem 1.5rem; font-size: 1rem; }

.btn-primary { background: var(--color-primary); color: var(--color-primary-content); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(9,198,240,0.5); }

.btn-secondary { background: var(--color-secondary); color: var(--color-secondary-content); }
.btn-secondary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(226,129,18,0.5); }

.btn-outline { background: transparent; color: var(--color-base-content); border-color: var(--color-border-strong); }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }

.btn-ghost { background: transparent; color: var(--color-base-content); }
.btn-ghost:hover { background: var(--color-base-200); }

.btn-gradient { background: var(--brand-gradient); color: #06141a; }
.btn-gradient:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -8px rgba(9,198,240,0.4); }

/* ---------- Badges & Pills ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.badge-primary   { background: rgba(9,198,240,0.12);  color: var(--color-primary-tint);   border: 1px solid rgba(9,198,240,0.3); }
.badge-secondary { background: rgba(226,129,18,0.12); color: var(--color-secondary-tint); border: 1px solid rgba(226,129,18,0.3); }
.badge-success   { background: rgba(105,255,145,0.12);color: var(--color-success-tint);   border: 1px solid rgba(105,255,145,0.3); }
.badge-gradient {
  position: relative;
  background: var(--color-base-100);
  color: var(--color-base-content);
}
.badge-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--brand-gradient);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.badge-gradient .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-gradient); display: inline-block; }
.badge-solid { background: var(--brand-gradient); color: #06141a; box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 4px 14px rgba(9,198,240,0.25); }

/* ---------- Cards ---------- */
.card {
  background: var(--color-base-200);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-box);
  padding: 24px;
  transition: border-color .25s ease;
}
.card:hover { border-color: var(--color-secondary); }
.card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.card p { color: var(--color-muted); font-size: 0.95rem; margin: 0; }

/* ---------- Form controls ---------- */
.field {
  display: block;
  width: 100%;
  padding: 0.7rem 0.95rem;
  background: var(--color-base-100);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-field);
  color: var(--color-base-content);
  font-family: inherit;
  font-size: 0.95rem;
}
.field:focus { outline: 2px solid var(--color-secondary); outline-offset: 2px; }
label { display: block; font-size: 0.85rem; color: var(--color-muted); margin-bottom: 6px; font-weight: 500; }

/* ---------- Layout helpers ---------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.grid    { display: grid; gap: 16px; }
.grid-2  { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3  { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-4  { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ============================================================
   Brand rules (enforce in code review, not CSS):
   - No em dashes anywhere in copy. Use commas, periods, or parens.
   - Body / description min 16px on marketing pages.
   - Filled cyan + filled orange should not sit adjacent. Pair filled
     with outline or ghost for hierarchy.
   - Only Crimson Pro (display) + Open Sans (body). No other typefaces.
   - The brand gradient is for accents only. Never apply it to body
     text or large solid backgrounds, dense tables, or forms.
   - Flat UI with hairline borders and subtle hover glows. No glassy
     or shadow-heavy or skeuomorphic styling.
   - Numbers and durations are specific ("60-90 minutes", not "comprehensive").
   - No exclamation points outside of UI feedback ("Saved!").
   ============================================================ */