/* ─────────────────────────────────────────────────────────────────────────────
   Geneticker concept design system — "Base Pairs"
   The palette is the four-colour chromatogram the logo already draws in:
   A green · C blue · G amber · T red. Every product picks ONE base as its accent
   (Cipher = A, Decipher = C); the homepage uses all four.
   Light = warm lab paper; dark = gel-imager black. Theme follows the OS unless
   <html data-theme="light|dark"> pins it (theme.js sets that from the toggle).
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --t-2xs: 11px;  --t-xs: 12px;  --t-sm: 13.5px; --t-md: 15px; --t-lg: 17px;
  --t-xl: 21px;   --t-2xl: 28px; --t-3xl: 40px;  --t-4xl: 56px;
  --t-display: clamp(46px, 7.4vw, 108px);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 80px; --s-11: 120px;

  --r-xs: 4px; --r-sm: 7px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
  --maxw: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .18s;

  /* light (default) */
  --paper: #f3f1ea;
  --paper-2: #ebe8df;
  --card: #fbfaf6;
  --card-2: #f7f5ef;
  --ink: #131513;
  --ink-2: #484d49;
  --ink-3: #5f655f;               /* 4.9:1 on --paper, AA for small mono labels */
  --line: #d8d4c9;
  --line-2: #e5e1d7;
  --grid: rgba(19, 21, 19, .045);
  --overlay: rgba(19, 21, 19, .42);
  --shadow-1: 0 1px 0 rgba(19, 21, 19, .04), 0 1px 2px rgba(19, 21, 19, .06);
  --shadow-2: 0 10px 30px -14px rgba(19, 21, 19, .28), 0 2px 6px -2px rgba(19, 21, 19, .08);
  --focus: #2257d6;

  /* the four bases: fill (decorative), text (AA on paper/card), soft (tint bg) */
  --A: #1f9a55;  --A-text: #157041; --A-soft: rgba(31, 154, 85, .11);
  --C: #2a62e4;  --C-text: #1d4fc4; --C-soft: rgba(42, 98, 228, .10);
  --G: #d59a06;  --G-text: #8a5f00; --G-soft: rgba(213, 154, 6, .14);
  --T: #dd3c43;  --T-text: #b4262d; --T-soft: rgba(221, 60, 67, .10);
  /* solid button fills that pass AA with their --X-on text, per theme */
  --A-btn: #157041; --A-on: #ffffff;
  --C-btn: #1d4fc4; --C-on: #ffffff;

  /* semantic states (map onto bases, so status colour == chromatogram colour) */
  --ok: var(--A-text);     --ok-soft: var(--A-soft);
  --warn: var(--G-text);   --warn-soft: var(--G-soft);
  --risk: var(--T-text);   --risk-soft: var(--T-soft);
  --info: var(--C-text);   --info-soft: var(--C-soft);

  /* product accent. Apps re-point these at one base, e.g. Cipher:
     :root { --accent: var(--A); --accent-text: var(--A-text); --accent-soft: var(--A-soft);
             --accent-btn: var(--A-btn); --accent-on: var(--A-on); }
     (vars resolve per theme, so one declaration covers light and dark) */
  --accent: var(--ink);
  --accent-text: var(--ink);       /* accent used AS text on paper/card */
  --accent-soft: rgba(19, 21, 19, .07);
  --accent-btn: var(--ink);        /* solid fill for primary buttons */
  --accent-on: var(--paper);       /* text ON --accent-btn */

  color-scheme: light;
}

/* dark: follows the OS unless pinned light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0a0c0b; --paper-2: #101311; --card: #131715; --card-2: #171b19;
    --ink: #e9ece7; --ink-2: #aab1ab; --ink-3: #7e8680;
    --line: #262b28; --line-2: #1c201e; --grid: rgba(233, 236, 231, .035);
    --overlay: rgba(0, 0, 0, .6);
    --shadow-1: 0 1px 0 rgba(0, 0, 0, .3);
    --shadow-2: 0 18px 40px -18px rgba(0, 0, 0, .8), 0 2px 8px -2px rgba(0, 0, 0, .4);
    --focus: #7aa2ff;
    --A: #3fd68e; --A-text: #5ee0a0; --A-soft: rgba(63, 214, 142, .12);
    --C: #5d8dff; --C-text: #87abff; --C-soft: rgba(93, 141, 255, .13);
    --G: #f3c24f; --G-text: #f5cd6b; --G-soft: rgba(243, 194, 79, .12);
    --T: #ff6b6e; --T-text: #ff8a8c; --T-soft: rgba(255, 107, 110, .12);
    --A-btn: #3fd68e; --A-on: #04140b;
    --C-btn: #6d97ff; --C-on: #050b1c;
    --accent-soft: rgba(233, 236, 231, .08);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0a0c0b; --paper-2: #101311; --card: #131715; --card-2: #171b19;
  --ink: #e9ece7; --ink-2: #aab1ab; --ink-3: #7e8680;
  --line: #262b28; --line-2: #1c201e; --grid: rgba(233, 236, 231, .035);
  --overlay: rgba(0, 0, 0, .6);
  --shadow-1: 0 1px 0 rgba(0, 0, 0, .3);
  --shadow-2: 0 18px 40px -18px rgba(0, 0, 0, .8), 0 2px 8px -2px rgba(0, 0, 0, .4);
  --focus: #7aa2ff;
  --A: #3fd68e; --A-text: #5ee0a0; --A-soft: rgba(63, 214, 142, .12);
  --C: #5d8dff; --C-text: #87abff; --C-soft: rgba(93, 141, 255, .13);
  --G: #f3c24f; --G-text: #f5cd6b; --G-soft: rgba(243, 194, 79, .12);
  --T: #ff6b6e; --T-text: #ff8a8c; --T-soft: rgba(255, 107, 110, .12);
  --A-btn: #3fd68e; --A-on: #04140b;
  --C-btn: #6d97ff; --C-on: #050b1c;
  --accent-soft: rgba(233, 236, 231, .08);
  color-scheme: dark;
}