/* ==========================================================================
   VIPR Guide Design -- design tokens
   --------------------------------------------------------------------------
   Loaded AFTER assets/theme/main.css, which stays vendored and (almost)
   untouched -- see docs/THEME-CHANGES.md. Everything this tool adds lives in
   the four vipr-*.css files, so a template upgrade is a readable diff.

   Order on every page:
     bootstrap.min.css -> bootstrap-icons.css -> theme/main.css
     -> vipr-tokens.css -> vipr-components.css -> vipr-sequence.css
     -> vipr-print.css
   ========================================================================== */

:root {
  /* ---- typography -------------------------------------------------------
     The theme's own remote @import of Plus Jakarta Sans is disabled (a
     render-blocking request to a third party is wrong for an offline lab
     tool). This stack uses the real face when it is installed on the machine
     and Segoe UI Variable otherwise, which is visually close on Windows.
     To self-host the webfont later see assets/fonts/PLACE-FONTS-HERE.txt --
     no code change needed. */
  --bs-body-font-family: "Plus Jakarta Sans", ui-sans-serif, "Segoe UI Variable Text",
                         "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;

  /* Sequences are read character by character and aligned by column, so a
     monospace face is load-bearing, not decorative. The theme provides none.
     app/ui/shell.js measures whether this actually resolved to a monospace
     font and warns if it did not. */
  --font-mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono",
               "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;

  --seq-size: 13.5px;
  --seq-size-sm: 12px;
  --seq-line: 1.9;

  /* ---- sequence palette ------------------------------------------------
     The source deck highlights the three regions in neon (NN #00FF00,
     backbone #00FFFF, tail #FFFF00). Those are unreadable as a web UI, so the
     roles are remapped onto the theme's own palette. NN gets the brand lime,
     which is semantically right: lime is this theme's accent colour and NN is
     the one part of a vrRNA you are allowed to change.

     Y and ZZ get DIFFERENT tints on purpose -- the validator has to be able to
     point at "unit 11, ZZ" and have you find it. */
  --seq-nn-bg: #B4F105;
  --seq-nn-fg: #051C12;
  --seq-y-bg: #E7EEEC;
  --seq-zz-bg: #D6E2DE;
  --seq-bb-fg: #0C3324;
  --seq-tail-bg: #FFEDD5;
  --seq-tail-fg: #7A3D06;
  --seq-skip-fg: #93A39B;
  --seq-mm-bg: #EF4444;
  --seq-mm-fg: #FFFFFF;
  --seq-ruler-fg: #A3B2AA;
  --seq-context-fg: #AEBCB4;
  --seq-bg: #FCFDFC;
  --seq-border: #E9EFEF;

  /* ---- basis badges ----------------------------------------------------
     Published requirement vs this tool's own heuristic. These two must never
     look alike; see app/core/score.js. */
  --basis-pub-bg: #E6F4EA;
  --basis-pub-fg: #14532D;
  --basis-heu-bg: #F1F3F2;
  --basis-heu-fg: #5A6A62;

  --focus-ring: 0 0 0 3px rgba(180, 241, 5, 0.45);
}

/* The publication's literal colours, for making a figure that matches the
   paper. Toggled from the navbar view menu; sets data-seq-palette on <html>. */
:root[data-seq-palette="neon"] {
  --seq-nn-bg: #00FF00;
  --seq-nn-fg: #000000;
  --seq-y-bg: #00FFFF;
  --seq-zz-bg: #00FFFF;
  --seq-bb-fg: #000000;
  --seq-tail-bg: #FFFF00;
  --seq-tail-fg: #000000;
  --seq-skip-fg: #777777;
}

/* Okabe-Ito, for colour-vision deficiency. */
:root[data-seq-palette="cb"] {
  --seq-nn-bg: #009E73;
  --seq-nn-fg: #FFFFFF;
  --seq-y-bg: #D7EBF8;
  --seq-zz-bg: #B8DDF4;
  --seq-bb-fg: #0B2B3C;
  --seq-tail-bg: #FBE3BF;
  --seq-tail-fg: #5A3B00;
  --seq-skip-fg: #8A8A8A;
  --seq-mm-bg: #D55E00;
}

/* Utility tokens the theme does not provide. */
.text-mono { font-family: var(--font-mono); }
.fw-600 { font-weight: 600; }
.text-tiny { font-size: 0.74rem; }
.text-small { font-size: 0.82rem; }