/* The look of every page, the sign-in page too: the font and the theme variables. It is
   public, as the sign-in page loads it before anyone has signed in; the other stylesheets are not. */

  /* INTER */
  /* Bundled Inter 4.1, the variable font of the release's web folder (OFL, see
     /static/fonts/OFL.txt). */
  @font-face {
    font-family: "Inter";
    src: url("/static/fonts/inter-4.1.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: block;
  }

  /* THEME VARIABLES */
  /* The look of the redesign: white cards with a large radius on a near-white page, ink as
     the only accent, and good/warning/bad reserved for data meaning. The dark theme takes
     the same steps from the same hues, checked with the dataviz palette validator against
     its card. */
  :root {
    color-scheme: light;
    --ink: #1d1d1f;
    --paper: #fbfbfd;
    --line: #e5e5ea;
    --accent-secondary: #6e6e73;
    --accent-soft: #f0f0f2;
    --good: #0f7b4d;
    /* The fill of a warning: yellow, so it never reads as an organisation's amber. */
    --warning: #d4a300;
    --warning-ink: #7a6200;
    --bad: #c4320a;
    --on-strong-color: #ffffff;

    --bg: var(--paper);
    --card: #ffffff;
    --border: var(--line);
    --border-light: #ededf0;
    --text: var(--ink);
    --text-secondary: #6e6e73;
    --muted: #86868b;
    /* The two tones of static/icons/entities.svg besides ink; both follow the theme. */
    --entity-icon-muted: var(--muted);
    --entity-icon-cut: var(--card);
    /* One colour per kind of entity, for its icon and its node; checked with the dataviz
       palette validator against --card in both themes. */
    --entity-drug: #3b6fd4;
    --entity-organisation: #b26b00;
    --entity-condition: #c2185b;
    --entity-country: #12858f;
    --entity-class: #7a5af8;
    --entity-target: #7e2491;
    --entity-phase: #6e6e73;
    --entity-trial: var(--entity-phase);
    --accent: var(--ink);
    --accent-dim: rgba(29, 29, 31, 0.06);
    --accent-glow: rgba(29, 29, 31, 0.14);
    --gray-200: #e5e5ea;
    --gray-300: #d2d2d7;
    --gray-400: #86868b;
    --radius-card: 24px;
    --radius-inner: 16px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.08);
    --select-option-bg: #ffffff;
    --select-option-color: #1d1d1f;
    --badge-other-bg: #f5f5f7;
    --badge-other-color: #6e6e73;
  }

  [data-theme="dark"] {
    color-scheme: dark;
    --ink: #f5f5f7;
    --paper: #000000;
    --line: #38383a;
    --accent-secondary: #aeaeb2;
    --accent-soft: #2c2c2e;
    --good: #5ebb88;
    --warning: #e8b62e;
    --warning-ink: var(--warning);
    --bad: #ff7454;
    --on-strong-color: #1d1d1f;

    --card: #1c1c1e;
    --border-light: #2c2c2e;
    --text-secondary: #aeaeb2;
    --muted: #8e8e93;
    --entity-drug: #4a95ee;
    --entity-organisation: #c87f28;
    --entity-condition: #f04d80;
    --entity-country: #3ea3ad;
    --entity-class: #8d7aff;
    --entity-target: #8a4fa3;
    --entity-phase: #a4a4a9;
    --accent-dim: rgba(245, 245, 247, 0.10);
    --accent-glow: rgba(245, 245, 247, 0.18);
    --gray-200: #38383a;
    --gray-300: #48484a;
    --gray-400: #8e8e93;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.50);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.50), 0 12px 32px rgba(0, 0, 0, 0.55);
    --select-option-bg: #1c1c1e;
    --select-option-color: #f5f5f7;
    --badge-other-bg: #2c2c2e;
    --badge-other-color: #aeaeb2;
  }