/* ==========================================================================
   BloodAI Analytics — design tokens and base
   --------------------------------------------------------------------------
   The single foundation every page loads, in all sixteen languages. It exists
   because the site previously stacked three stylesheets — a 71KB legacy
   style.css, a design system on top of it, and a bridge on top of that — which
   turned into an !important war where rules that looked correct silently did
   nothing. Everything visual now derives from the tokens below, and exactly one
   component stylesheet loads after this file.

   Nothing here is page-specific. Component files own components.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- brand ------------------------------------------------------------ */
  --brand: #3538cd;
  --brand-600: #2f32b8;
  --brand-700: #262a95;
  --brand-soft: #eef0ff;
  --brand-ring: rgba(53, 56, 205, 0.32);
  --brand-solid: #3538cd;     /* fixed fill for buttons: white on this is 7.5:1 in both schemes */
  --accent: #e11d48;          /* the blood motif — used sparingly, never as text on tint */
  --accent-soft: #fff1f4;

  /* --- semantic --------------------------------------------------------- */
  --ok: #047857;
  --ok-soft: #ecfdf5;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --danger: #be123c;
  --danger-soft: #fff1f2;

  /* --- surfaces and ink ------------------------------------------------- */
  --page: #f6f8fc;
  --surface: #ffffff;
  --surface-2: #f2f5fb;
  --surface-3: #e8edf7;
  --ink: #0a0f1f;
  --ink-2: #4a5468;
  --ink-3: #5b6480;
  --line: #e2e8f3;
  --line-2: #cfd7e8;

  /* --- type ------------------------------------------------------------- */
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Outfit', var(--sans);
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --t-xs: 0.78rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: 1.0625rem;
  --t-lg: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  --t-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --t-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --t-3xl: clamp(1.9rem, 1.55rem + 1.75vw, 2.75rem);
  --t-4xl: clamp(2.35rem, 1.8rem + 2.75vw, 3.75rem);
  --t-5xl: clamp(2.75rem, 1.9rem + 4vw, 4.5rem);

  --tight: -0.022em;
  --wide: 0.1em;

  /* --- space ------------------------------------------------------------ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  /* Section padding doubles at every boundary, so this is half the gap between
     two sections, not the gap. At 5rem the homepage put 160px of nothing
     between fourteen sections and ran to 13,400px. */
  --section-y: clamp(2.25rem, 4vw, 3.5rem);
  --measure: 68ch;

  /* --- shape and depth -------------------------------------------------- */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(10, 15, 31, 0.05);
  --sh-2: 0 2px 4px rgba(10, 15, 31, 0.04), 0 8px 20px rgba(10, 15, 31, 0.06);
  --sh-3: 0 8px 18px rgba(10, 15, 31, 0.07), 0 24px 56px rgba(10, 15, 31, 0.09);
  --sh-brand: 0 8px 24px rgba(53, 56, 205, 0.28);

  /* --- motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --fast: 140ms;
  --base: 200ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --brand: #8b8cf8;
    --brand-600: #a3a4ff;
    --brand-700: #b9baff;
    --brand-soft: #1b1e3d;
    --brand-ring: rgba(139, 140, 248, 0.38);
    --accent: #fb7185;
    --accent-soft: #2e1420;

    --ok: #5eead4;
    --ok-soft: #0f2722;
    --warn: #fcd34d;
    --warn-soft: #2a2110;
    --danger: #fda4af;
    --danger-soft: #2d1319;

    --page: #070a12;
    --surface: #0e1220;
    --surface-2: #141929;
    --surface-3: #1c2234;
    --ink: #eef1f8;
    --ink-2: #a7b0c6;
    --ink-3: #7d8699;
    --line: #232a3d;
    --line-2: #333c53;

    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --sh-2: 0 2px 6px rgba(0, 0, 0, 0.5), 0 10px 26px rgba(0, 0, 0, 0.45);
    --sh-3: 0 12px 28px rgba(0, 0, 0, 0.55), 0 30px 64px rgba(0, 0, 0, 0.5);
    --sh-brand: 0 8px 26px rgba(53, 56, 205, 0.5);
  }
}

:root[data-theme='dark'] {
  --brand: #8b8cf8;
  --brand-600: #a3a4ff;
  --brand-700: #b9baff;
  --brand-soft: #1b1e3d;
  --brand-ring: rgba(139, 140, 248, 0.38);
  --accent: #fb7185;
  --accent-soft: #2e1420;

  --ok: #5eead4;
  --ok-soft: #0f2722;
  --warn: #fcd34d;
  --warn-soft: #2a2110;
  --danger: #fda4af;
  --danger-soft: #2d1319;

  --page: #070a12;
  --surface: #0e1220;
  --surface-2: #141929;
  --surface-3: #1c2234;
  --ink: #eef1f8;
  --ink-2: #a7b0c6;
  --ink-3: #7d8699;
  --line: #232a3d;
  --line-2: #333c53;

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sh-2: 0 2px 6px rgba(0, 0, 0, 0.5), 0 10px 26px rgba(0, 0, 0, 0.45);
  --sh-3: 0 12px 28px rgba(0, 0, 0, 0.55), 0 30px 64px rgba(0, 0, 0, 0.5);
  --sh-brand: 0 8px 26px rgba(53, 56, 205, 0.5);
}

/* Scripts that need their own face. Keyed on lang, never on dir, so Hebrew
   does not inherit the Arabic face simply for being right-to-left. */
html[lang='ar'] { --sans: 'Noto Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif; --display: var(--sans); }
html[lang='he'] { --sans: 'Noto Sans Hebrew', 'Plus Jakarta Sans', system-ui, sans-serif; --display: var(--sans); }

/* ---------------------------------------------- Bootstrap variable bridge */
/*
 * Bootstrap 5.3 components do not inherit colour from the page — they read
 * their own custom properties, which default to Bootstrap's light palette. So
 * `.card`, `.accordion`, `.dropdown-menu`, `.modal` and `.table` all painted
 * themselves light-on-light in dark mode, and `.h1`-`.h6` (a class, which beats
 * our `h1..h6` element rule on specificity) rendered card titles at 1.21:1 —
 * effectively invisible on a phone at night.
 *
 * Every component derives from the handful of root variables below, so
 * pointing those at our tokens fixes all of them at once, in both schemes.
 */
:root {
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--page);
  --bs-body-color-rgb: 10, 15, 31;
  --bs-body-bg-rgb: 246, 248, 252;
  --bs-emphasis-color: var(--ink);
  --bs-emphasis-color-rgb: 10, 15, 31;
  --bs-heading-color: var(--ink);
  --bs-secondary-color: var(--ink-2);
  --bs-secondary-bg: var(--surface-2);
  --bs-tertiary-color: var(--ink-3);
  --bs-tertiary-bg: var(--surface-3);
  --bs-border-color: var(--line);
  --bs-border-color-translucent: var(--line);
  --bs-link-color: var(--brand);
  --bs-link-color-rgb: 53, 56, 205;
  --bs-link-hover-color: var(--brand-600);
  --bs-code-color: var(--accent);
  --bs-border-radius: var(--r);
  --bs-border-radius-lg: var(--r-lg);
  --bs-border-radius-sm: var(--r-sm);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bs-body-color-rgb: 238, 241, 248;
    --bs-body-bg-rgb: 7, 10, 18;
    --bs-emphasis-color-rgb: 238, 241, 248;
    --bs-link-color-rgb: 139, 140, 248;
  }
}

:root[data-theme='dark'] {
  --bs-body-color-rgb: 238, 241, 248;
  --bs-body-bg-rgb: 7, 10, 18;
  --bs-emphasis-color-rgb: 238, 241, 248;
  --bs-link-color-rgb: 139, 140, 248;
}

/* `.h1`-`.h6` are classes, so they outrank the element selector above. */
.h1, .h2, .h3, .h4, .h5, .h6 { color: var(--ink); }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; max-width: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  color: var(--ink);
  letter-spacing: var(--tight);
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 var(--s-3);
}

p { margin: 0 0 var(--s-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-underline-offset: 0.18em; text-decoration-thickness: from-font; }
a:hover { color: var(--brand-600); }

img, svg, video { max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--brand-soft); color: var(--ink); }

/* Visually hidden without the negative offset that once added 10,000px of
   horizontal overflow and rendered every right-to-left page blank. */
.skip-link {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed;
  inset-block-start: var(--s-3);
  inset-inline-start: var(--s-3);
  width: auto; height: auto;
  margin: 0; padding: var(--s-3) var(--s-5);
  clip: auto; clip-path: none;
  background: var(--brand);
  color: #fff;
  border-radius: var(--r);
  box-shadow: var(--sh-3);
  z-index: 2000;
}

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