/*
 * brand.css - Geneseq METAseq brand for web.
 *
 * VENDORED COPY. Do not edit in place.
 * Source: geneseq_brand/css/brand.css
 * Brand kit:  issued 2026-05-23
 * Re-vendor by running: bash assets/sync_brand.sh
 */


:root {
  /* METAseq primaries */
  --metaseq-indigo:    #1B3A6B;
  --metaseq-navy:      #0E1F3E;
  --metaseq-signal:    #00A6D6;

  /* Geneseq parent gradient */
  --geneseq-leaf:      #B5DE7F;
  --geneseq-flow:      #00B0F0;
  --geneseq-deep:      #0070E0;

  /* Result-state semantics */
  --result-coral:      #E85D5D;
  --result-sage:       #6FB28F;
  --warn-amber:        #E9A23B;

  /* Neutrals */
  --ink:               #1A2233;
  --graphite:          #3F4A5E;
  --slate:             #5A6478;
  --mist:              #EEF3F9;
  --cloud:             #DDE3EC;
  --paper:             #FFFFFF;

  /* Data viz categorical sequence */
  --viz-1: #1B3A6B; --viz-2: #00A6D6; --viz-3: #6FB28F; --viz-4: #E9A23B;
  --viz-5: #7C3AED; --viz-6: #E85D5D; --viz-7: #3F4A5E; --viz-8: #B5DE7F;

  /* Spacing scale */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;

  /* Radius */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px;

  /* Shadow */
  --shadow-low:  0 1px 2px rgba(14, 31, 62, 0.06);
  --shadow-med:  0 4px 12px rgba(14, 31, 62, 0.08);
  --shadow-high: 0 16px 32px rgba(14, 31, 62, 0.12);

  /* Motion */
  --duration-fast: 120ms;
  --duration-default: 200ms;
  --duration-slow: 320ms;
  --easing: cubic-bezier(0.2, 0, 0, 1);

  /* Type stack */
  --font-wordmark: 'Space Grotesk', 'DM Sans', Inter, sans-serif;
  --font-ui:       'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-report:   'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-mono:     'JetBrains Mono', 'IBM Plex Mono', Consolas, 'Courier New', monospace;
}

/* ---- Base ----------------------------------------------------------------- */
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.5;
}
@supports (font-variation-settings: normal) {
  html, body { font-family: 'InterVariable', var(--font-ui); }
}

code, pre, .mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-report); }

/* ---- Type scale ----------------------------------------------------------- */
.t-display  { font-size: 56px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em;  color: var(--metaseq-indigo); }
.t-h1       { font-size: 40px; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; color: var(--metaseq-indigo); }
.t-h2       { font-size: 28px; font-weight: 600; line-height: 1.25; letter-spacing: -0.010em; color: var(--metaseq-indigo); }
.t-h3       { font-size: 22px; font-weight: 600; line-height: 1.30; letter-spacing: -0.005em; color: var(--metaseq-indigo); }
.t-h4       { font-size: 18px; font-weight: 600; line-height: 1.35;                            color: var(--ink); }
.t-eyebrow  { font-size: 12px; font-weight: 700; line-height: 1.40; letter-spacing: 0.10em;
              text-transform: uppercase; color: var(--slate); }
.t-body-l   { font-size: 18px; font-weight: 400; line-height: 1.55; }
.t-body     { font-size: 16px; font-weight: 400; line-height: 1.50; }
.t-body-s   { font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--graphite); }
.t-caption  { font-size: 12px; font-weight: 400; line-height: 1.40; color: var(--slate); }
.t-micro    { font-size: 10px; font-weight: 400; line-height: 1.35; letter-spacing: 0.02em; color: var(--slate); }
.t-big      { font-size: 64px; font-weight: 700; line-height: 1.00; letter-spacing: -0.03em; color: var(--metaseq-indigo); }

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 16px;
  border-radius: var(--radius-md);
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all var(--duration-default) var(--easing);
  border: 2px solid transparent;
}
.btn--primary {
  background: var(--metaseq-indigo); color: var(--paper);
}
.btn--primary:hover { background: #142C53; }
.btn--secondary {
  background: transparent; color: var(--metaseq-indigo); border-color: var(--metaseq-indigo);
}
.btn--secondary:hover { background: var(--mist); }
.btn--tertiary {
  background: transparent; color: var(--metaseq-signal); border: 0; height: auto; padding: 0;
}
.btn--tertiary:hover { color: var(--geneseq-deep); text-decoration: underline; }

/* ---- Cards and KPI tiles -------------------------------------------------- */
.card {
  background: var(--paper);
  border: 1px solid var(--cloud);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.card--coral  { border-left: 8px solid var(--result-coral); }
.card--sage   { border-left: 8px solid var(--result-sage); }
.card--amber  { border-left: 8px solid var(--warn-amber); }

.kpi {
  background: var(--metaseq-indigo);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.kpi__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
                text-transform: uppercase; color: var(--cloud); margin-bottom: 12px; }
.kpi__big     { font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -0.03em;
                color: var(--paper); }
.kpi__sub     { font-size: 13px; color: var(--cloud); margin-top: 12px; }

/* ---- Status badge --------------------------------------------------------- */
.badge {
  display: inline-block; padding: 4px 10px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; font-family: var(--font-ui);
}
.badge--coral  { background: rgba(232,93,93,0.14);   color: #B53B3B; }
.badge--sage   { background: rgba(111,178,143,0.20); color: #3D7A57; }
.badge--amber  { background: rgba(233,162,59,0.22);  color: #946018; }
.badge--signal { background: rgba(0,166,214,0.15);   color: var(--metaseq-signal); }

/* ---- Tables --------------------------------------------------------------- */
.table {
  width: 100%; border-collapse: collapse; background: var(--paper);
  border: 1px solid var(--cloud); border-radius: var(--radius-md); overflow: hidden;
  font-feature-settings: 'tnum' on;
}
.table thead { background: var(--metaseq-indigo); }
.table th {
  color: var(--paper); padding: 10px 14px; text-align: left;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
}
.table td  { padding: 10px 14px; font-size: 14px; border-top: 1px solid var(--cloud); }
.table tr:nth-child(even) td { background: var(--mist); }
.table .mono { font-family: var(--font-mono); font-size: 13px; }

/* ---- Forms ---------------------------------------------------------------- */
.input {
  height: 40px; padding: 0 12px;
  border: 1px solid var(--cloud); border-radius: var(--radius-md);
  background: var(--paper); color: var(--ink);
  font-family: var(--font-ui); font-size: 14px;
  transition: border-color var(--duration-default) var(--easing);
}
.input:focus {
  outline: none; border-color: var(--metaseq-signal);
  box-shadow: 0 0 0 3px rgba(0, 166, 214, 0.18);
}
.label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
         text-transform: uppercase; color: var(--slate); margin-bottom: 4px; display: block; }

/* ---- Surface helpers ------------------------------------------------------ */
.surface-paper { background: var(--paper); color: var(--ink); }
.surface-mist  { background: var(--mist);  color: var(--ink); }
.surface-indigo{ background: var(--metaseq-indigo); color: var(--paper); }
.surface-navy  { background: var(--metaseq-navy);   color: var(--paper); }

/* ---- Geneseq parent gradient signature ----------------------------------- */
.gradient-signature {
  height: 8px;
  background: linear-gradient(90deg,
    var(--geneseq-leaf) 0%,
    var(--geneseq-flow) 33%,
    var(--geneseq-deep) 66%,
    var(--metaseq-indigo) 100%);
}

/* ---- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}