/*
 * WHL (World Health Laboratories) tenant theme.
 * Real brand tokens — see portal-concept.md §3. Clinical, navy-on-white.
 *
 * Sora is self-hosted: the woff2 weights live in /fonts (sora-300..700.woff2).
 * The @font-face declarations below reference those files. No Google Fonts CDN
 * (strict CSP, font-src 'self'); system-ui stays in the stack as a fallback.
 */

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/sora-300.woff2") format("woff2");
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/sora-400.woff2") format("woff2");
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/sora-500.woff2") format("woff2");
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/sora-600.woff2") format("woff2");
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/sora-700.woff2") format("woff2");
}

:root {
  /* Brand */
  --brand: #2e5077;
  --brand-700: #1a2c37;
  --brand-900: #0e202a;
  --accent: #1246d6;
  --brand-soft: #7baecf;
  --brand-soft-2: #a6c5dc;

  /* Ink / lines */
  --ink: #1a2c37;
  --ink-2: #354052;
  --ink-3: #606060;
  --line: #d1d5d7;

  /* Surfaces */
  --surface: #ffffff;
  --bg: #f5f8fa;

  /* Typography */
  --font-sans: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;
}

[data-theme="dark"] {
  --brand: #7baecf;
  --brand-700: #a6c5dc;
  --brand-900: #cfe0ec;
  --accent: #6f97ea;
  --brand-soft: #2e5077;
  --brand-soft-2: #1a2c37;

  --ink: #eef3f7;
  --ink-2: #cfd8e0;
  --ink-3: #9aa6b0;
  --line: #29404f;

  --surface: #0e202a;
  --bg: #0a1820;
}

/* Base application of the tokens so theming is visibly applied. */
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background-color: var(--bg);
}