/* ============================================================================
   e-LaboraTorio v4 — DESIGN TOKENS + SHARED PRIMITIVES
   ----------------------------------------------------------------------------
   System: "Bench" — a light, laboratory-clean system following three references:
     * Stripe  — landing narrative: deep-navy ink, tight negative tracking on
                 display type, generous purposeful spacing, navy-TINTED layered
                 shadows, conservative radii.
     * Linear  — product surfaces (console/pipeline): tight hierarchy, small
                 mono labels, hairline borders, 150ms state motion, accent used
                 sparingly and only for interaction + running states.
     * Notion  — honest information: whisper borders, alternating white/wash
                 section bands, tables as first-class citizens, pill status tags.
   One accent (reagent teal). Light theme only. No dark sections except code
   wells. Fonts are self-hosted (subset-free variables; offline-safe).

   CHANGELOG (post-build design audit, 2026-10-22): two deliberate corrections
   after the independent design audit — (1) --ink-3 darkened #69808f -> #526775
   (the old value failed WCAG AA as small-text color on every surface; new value
   5.91:1 on paper / 5.16:1 on slate-bg, checked in _v4/contrast_check.py);
   (2) the grouped h1-h4 rule was split so h3/h4 stop inheriting display metrics
   and margins moved onto the 4/8px grid. _v4/tokens.FROZEN.txt preserves the
   pre-audit token set for provenance.
   ========================================================================== */

/* ---------- self-hosted fonts ---------- */
@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- type families ---- */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* ---- type scale (fluid display; fixed steps below) ---- */
  --fs-display: clamp(2.55rem, 1.4rem + 3.8vw, 3.9rem);   /* hero only        */
  --fs-h2:      clamp(1.55rem, 1.3rem + 1.05vw, 2.05rem); /* section titles   */
  --fs-h3:      1.05rem;                                  /* card titles      */
  --fs-lead:    1.11rem;                                  /* section leads    */
  --fs-body:    1rem;
  --fs-small:   .89rem;
  --fs-cap:     .8rem;
  --fs-micro:   .8rem;
  --fs-eyebrow: .74rem;                                    /* mono overline    */
  --fs-label:  .73rem;                                   /* mono pill/label  */
  --fs-stat:    clamp(2rem, 4vw, 2.55rem);                /* console headline metric */
  --fs-stat-sm: 1.9rem;                                   /* same metric, ≤640px */

  /* ---- weight + tracking discipline (Linear-style compression at scale) ---- */
  --tw-display: 640;   --ls-display: -0.032em;
  --tw-h2:      640;   --ls-h2:      -0.021em;
  --tw-h3:      630;   --ls-h3:      -0.012em;
  --tw-ui:      550;                                   /* UI emphasis     */
  --tw-body:    400;

  /* ---- spacing: strict 4/8 grid ---- */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 20px;
  --s6: 24px;  --s7: 28px;  --s8: 32px;  --s10: 40px; --s12: 48px;
  --s16: 64px; --s20: 80px;
  --sec-pad: clamp(58px, 7.5vw, 100px);                 /* vertical section rhythm */
  --wrap: 1128px;

  /* ---- compact-control metrics: the ONLY sanctioned sub-grid values --------
     40-42 px control height is a real constraint, so controls use deliberate
     2 px half-steps. Macro layout (sections, cards, grids, gaps) never does.  */
  --ctl-y: 10px; --ctl-x: 18px;          /* buttons, text inputs */
  --ctl-y-lg: var(--s3); --ctl-x-lg: 22px;
  --ctl-y-pill: 2.5px;                   /* status tags (hairline pill) */

  /* ---- color: cool-neutral lab + ONE teal accent + semantic states ---- */
  --bg:        #fafbfc;            /* page canvas */
  --paper:     #ffffff;            /* cards */
  --wash:      #f4f8f7;            /* alternating section band (teal-tinted 2%) */
  --ink:       #0d1f2d;            /* deep-navy headings/body (never pure black) */
  --ink-2:     #44566a;            /* secondary text */
  --ink-3:     #43586a;            /* muted captions (AA on paper/bg/wash/slate-bg, checked 2026-10-22) */
  --line:      rgba(13, 31, 45, .09);
  --line-2:    rgba(13, 31, 45, .16);
  --line-3:    rgba(13, 31, 45, .28);
  --topbar-bg: rgba(250, 251, 252, .84);
  --hover-bg:  rgba(13, 31, 45, .05);
  --code-bg:   rgba(13, 31, 45, .035);
  --dot:       rgba(13, 31, 45, .12);

  --accent:    #0b7568;            /* reagent teal — interaction + running only */
  --accent-600:#0a6458;
  --accent-ink:#08524a;            /* accent-colored text (AA on white) */
  --accent-soft:#e3f2ee;
  --accent-wash:#f1f9f7;
  --ring:      rgba(11, 117, 104, .32);

  --ok:        #0e7a43;  --ok-bg:   #e8f5ed;
  --warn:      #96620a;  --warn-bg: #fdf3e3;
  --bad:       #b3261e;  --bad-bg:  #fcecea;
  --slate:     #51616d;  --slate-bg:#edf0f3;
  --violet:    #5c50c4;  --violet-bg:#eeecfa;   /* reserved: review/agent-role */

  /* ---- elevation: navy-ink-tinted, layered (Stripe chromatic-depth rule) ---- */
  --shadow-xs: 0 1px 2px rgba(13, 31, 45, .05);
  --shadow-s:  0 1px 2px rgba(13, 31, 45, .05), 0 4px 14px -4px rgba(13, 31, 45, .08);
  --shadow-m:  0 2px 4px rgba(13, 31, 45, .05), 0 14px 34px -10px rgba(13, 31, 45, .15);
  --shadow-l:  0 4px 8px rgba(13, 31, 45, .06), 0 28px 64px -18px rgba(13, 31, 45, .22);
  --shadow-acc: 0 6px 16px -6px rgba(11, 117, 104, .45);   /* primary CTA only */

  /* ---- radii: conservative (Stripe 4-8 rule; panels slightly larger) ---- */
  --r-s: 7px;      /* buttons, inputs, code chips */
  --r-m: 11px;     /* cards */
  --r-l: 15px;     /* panels, hero cards, pipeline board */
  --pill: 999px;

  /* ---- motion: 100-200ms state-change only ---- */
  --t-fast: 110ms cubic-bezier(.25, .55, .3, 1);
  --t: 165ms cubic-bezier(.25, .55, .3, 1);
  --dur-fill: 260ms;   /* progress bar fill */
}

/* ============================== dark theme =============================== */
/* Opt-in dark theme (light stays the default). Flips the same token set, so
   every surface/component that consumes the variables follows automatically. */
[data-theme="dark"] {
  --bg:        #0a1117;
  --paper:     #101a22;
  --wash:      #0c141c;
  --ink:       #e8eef3;
  --ink-2:     #b9c7d2;
  --ink-3:     #8ba1b0;
  --line:      rgba(232, 238, 243, .10);
  --line-2:    rgba(232, 238, 243, .18);
  --line-3:    rgba(232, 238, 243, .30);
  --topbar-bg: rgba(10, 17, 23, .84);
  --hover-bg:  rgba(232, 238, 243, .08);
  --code-bg:   rgba(232, 238, 243, .06);
  --dot:       rgba(232, 238, 243, .10);

  --accent:    #14a08b;
  --accent-600:#18b39c;
  --accent-ink:#4dd3c0;
  --accent-soft:#12302b;
  --accent-wash:#0d231f;
  --ring:      rgba(20, 160, 139, .40);

  --ok:        #35c46f;  --ok-bg:   #0e2418;
  --warn:      #e0a93c;  --warn-bg: #261d08;
  --bad:       #ea6b61;  --bad-bg:  #2a1412;
  --slate:     #8ba1b0;  --slate-bg:#1a232c;
  --violet:    #9a8fef;  --violet-bg:#211d3d;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-s:  0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px -4px rgba(0, 0, 0, .5);
  --shadow-m:  0 2px 4px rgba(0, 0, 0, .35), 0 14px 34px -10px rgba(0, 0, 0, .6);
  --shadow-l:  0 4px 8px rgba(0, 0, 0, .4), 0 28px 64px -18px rgba(0, 0, 0, .65);
  --shadow-acc: 0 6px 16px -6px rgba(20, 160, 139, .5);
}

/* ============================== base ====================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-weight: var(--tw-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-ui);
  line-height: 1.12;
  text-wrap: balance;
}
h3, h4 { margin-bottom: var(--s3); font-weight: var(--tw-h3); letter-spacing: var(--ls-h3); }
h1 { margin-bottom: var(--s4); font-size: var(--fs-display); font-weight: var(--tw-display); letter-spacing: var(--ls-display); line-height: 1.045; }
h2 { margin-bottom: var(--s4); font-size: var(--fs-h2); font-weight: var(--tw-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.mono { font-family: var(--font-mono); font-feature-settings: "zero" on; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s6); }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: .155em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 var(--s4);
}
.eyebrow::before {           /* 14px dash marker — quiet system-wide signature */
  content: ""; width: 14px; height: 2px; background: var(--accent); flex: none;
}
.sub  { color: var(--ink-2); max-width: 64ch; font-size: var(--fs-lead); }
.micro { font-size: var(--fs-micro); color: var(--ink-3); margin: .4em 0 0; line-height: 1.55; }
.num { font-family: var(--font-mono); font-feature-settings: "tnum" on, "zero" on; }

/* (removed 2026-10-22: the unused .bench-grid utility — the graph-paper texture
   lives on .hero::before with a radial mask, and a dead class is a second
   source of truth. See _v4/tokens.FROZEN.txt for the pre-audit snapshot.) */

/* ============================ shared primitives ============================= */

/* ---- buttons: 3-tier hierarchy ---- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 10px 18px; border-radius: var(--r-s);
  border: 1px solid transparent;
  font: inherit; font-size: var(--fs-small); font-weight: var(--tw-ui); letter-spacing: -.006em;
  cursor: pointer; white-space: nowrap;
  transition: transform var(--t), box-shadow var(--t), background var(--t),
              border-color var(--t), color var(--t);
}
.button:hover { text-decoration: none; }
.button:active { transform: translateY(0) scale(.99); }
.button.primary {
  color: #fff; background: var(--accent);
  box-shadow: var(--shadow-xs), var(--shadow-acc);
}
.button.primary:hover { background: var(--accent-600); transform: translateY(-1px);
  box-shadow: var(--shadow-s), 0 8px 20px -6px rgba(11, 117, 104, .5); }
.button.primary:active { transform: translateY(0); }
.button.secondary {
  color: var(--ink); background: var(--paper); border-color: var(--line-2);
  box-shadow: var(--shadow-xs);
}
.button.secondary:hover {
  color: var(--accent-ink); border-color: var(--accent); background: var(--accent-wash);
  transform: translateY(-1px); box-shadow: var(--shadow-s);
}
.button.lg { padding: 12px 22px; font-size: var(--fs-body); }
.button.sm { padding: 6px 14px; font-size: var(--fs-small); border-radius: var(--r-s); }
.quiet {
  font: inherit; font-size: var(--fs-cap); font-weight: var(--tw-ui);
  font-family: var(--font-mono); letter-spacing: .01em;
  color: var(--accent-ink); background: transparent;
  border: 1px solid var(--line-2); border-radius: var(--pill);
  min-height: 32px; padding: var(--s1) var(--s3); cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.quiet:hover { background: var(--accent-soft); border-color: var(--accent); }
/* pill/rounded controls keep their own radius while keyboard-focused
   (the global :focus-visible radius of 4px would square them off) */
.button:focus-visible { border-radius: var(--r-s); }
.quiet:focus-visible { border-radius: var(--pill); }

/* ---- status tags: lab pill (mono, uppercase-friendly) ---- */
.tag {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .05em; padding: 2.5px 8px; border-radius: var(--pill);
  white-space: nowrap; line-height: 1.5;
}
.tag.green  { color: var(--ok);     background: var(--ok-bg); }
.tag.teal   { color: var(--accent-ink); background: var(--accent-soft); }  /* running (in progress) */
.tag.amber  { color: var(--warn);   background: var(--warn-bg); }
.tag.red    { color: var(--bad);    background: var(--bad-bg); }
.tag.slate  { color: var(--slate);  background: var(--slate-bg); }
.tag.violet { color: var(--violet); background: var(--violet-bg); }

/* ---- cards & panels (elevation ladder: hover only where interactive) ---- */
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m);
  box-shadow: var(--shadow-xs);
}
.panel {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--shadow-s);
}

/* ---- form label (console/waitlist micro-labels) ---- */
.lbl {
  display: block; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s2);
}

/* ---- section rhythm ----
   padding-BLOCK by design: sections often also carry .wrap, whose inline
   padding (the page gutter) must survive. The previous `padding: X 0`
   shorthand zeroed that gutter, so hero/demo/footer sat flush to the
   viewport edge on mobile and 24 px wider than sibling sections on desktop.
   (Fixed 2026-10-22 after a computed-layout audit at 1440 and 390 px.) */
.section { padding-block: var(--sec-pad); }
.section.alt { background: var(--wash); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 640px; margin-bottom: clamp(26px, 4vw, 44px); }
.section-head .sub { margin-top: var(--s2); font-size: var(--fs-body); }

/* ---- reduced motion: state still visible, movement removed ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}