/* GenoAccel design tokens.
 *
 * Source of truth: docs/GENOACCEL-UI-DESIGN.md §1.3. Do not invent values here —
 * if a token needs to change, change it in the design document first.
 *
 * The one hard rule in this file: --signal is RESERVED. It appears only where
 * clinical or system severity is real (pathogenic classification, QC failure,
 * breach alert, destructive confirmation). Never for emphasis, never for a CTA,
 * never decoratively. In a product where red means "this variant may kill
 * someone", spending red on a Sign-up button is a safety defect dressed as
 * branding.
 */

:root {
  /* ── Color — "Coverage" ─────────────────────────────────────────────── */
  --ink:      #14181F;   /* near-black with a blue cast; all primary text */
  --paper:    #F7F8FA;   /* cool near-white ground (explicitly not cream) */
  --slate:    #5A6472;   /* secondary text, rules, axis labels */
  --depth:    #1B4D8F;   /* deep instrument blue — primary action, brand */
  --verified: #2E8B6F;   /* teal-green — pass, validated, concordant */
  --signal:   #E2574C;   /* clinical red — RESERVED, see header */

  /* Derived surfaces. Not in the spec's token table, but needed for real
     components; all are tints of the named tokens, never new hues. */
  --surface:  #FFFFFF;
  --rule:     #E3E6EB;
  --rule-soft:#EFF1F4;
  --depth-05: #F4F7FB;
  --depth-12: rgba(27, 77, 143, .12);
  --ink-70:   rgba(20, 24, 31, .70);

  /* ── Type ───────────────────────────────────────────────────────────── */
  --display: "Archivo", "Archivo Expanded", system-ui, -apple-system, sans-serif;
  --body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --data:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale: 1.25 ratio, 16px base. */
  --t11: 11px; --t12: 12px; --t14: 14px; --t16: 16px; --t20: 20px;
  --t25: 25px; --t31: 31px; --t39: 39px; --t49: 49px; --t61: 61px;

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --max:    1440px;  /* content max width */
  --gutter: 32px;
  --rail:   184px;   /* left coordinate rail */
  --radius: 2px;     /* not 0 (broadsheet), not 12px (SaaS). 2px reads as
                        instrument software. */

  /* ── Motion budget ──────────────────────────────────────────────────── */
  /* The hero draw, hover transitions, and the progress fill. Nothing else
     animates — restraint is what keeps the one animated moment from reading
     as noise. */
  --draw:  1.4s;
  --hover: 120ms;
  --ease:  cubic-bezier(.2, .7, .3, 1);
}

/* Dark inversion. Genome browsers are commonly used dark and this audience
   expects it: ground and ink invert, while --depth / --verified / --signal are
   held at adjusted luminance so their meanings survive. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink:      #EEF1F5;
    --paper:    #0E1116;
    --slate:    #8A94A3;
    --depth:    #4B8FE0;
    --verified: #3FB894;
    --signal:   #F0736A;
    --surface:  #151A21;
    --rule:     #242B34;
    --rule-soft:#1C222A;
    --depth-05: #16212E;
    --depth-12: rgba(75, 143, 224, .16);
    --ink-70:   rgba(238, 241, 245, .70);
  }
}

/* ── Reset, kept minimal ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t16);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--depth); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Visible focus for keyboard users. A11Y.1 baseline — never remove without a
   replacement indicator. */
:focus-visible {
  outline: 2px solid var(--depth);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.display {
  font-family: var(--display);
  font-stretch: 125%;            /* the wide cut — instrument-panel labeling */
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.06;
}

/* Mono is a correctness requirement, not a style choice: chr7:117,559,590 and
   c.5266dupC must align in a table, and 1/l and 0/O must not be confusable.
   Every identifier, coordinate, metric and ID uses this. */
.mono {
  font-family: var(--data);
  font-variant-ligatures: none;
  font-variant-numeric: tabular-nums;
}

/* Screen-reader-only text that remains focusable (used by the skip link). */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -60px; left: var(--gutter);
  z-index: 100; padding: 10px 16px;
  background: var(--depth); color: #fff;
  border-radius: var(--radius); font-size: var(--t14); font-weight: 500;
  transition: top var(--hover) var(--ease);
}
.skip-link:focus { top: 12px; text-decoration: none; }

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