/* ============================================================
   Finalform — design tokens
   Monochrome lab-reference direction. No hue anywhere.

   wp-content/themes/finalform/assets/css/tokens.css
   Enqueue FIRST, before all other stylesheets.
   ============================================================ */

@font-face {
  font-family: "Nevan";
  src: url("../fonts/Nevan.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FM Bolyar Sans Pro";
  src: url("../fonts/FMBolyarSansPro-500.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --------------------------------------------------------
     INK
     Five neutrals between black and white. No saturation at
     any stop — every value is a true gray, so the page stays
     monochrome under any display profile.
     -------------------------------------------------------- */
  --ff-black:      #000000;
  --ff-ink-800:    #1a1a1a;   /* body copy — softer than pure black at 14px */
  --ff-ink-600:    #666666;   /* secondary text, spec labels */
  --ff-ink-400:    #999999;   /* disabled, placeholder */
  --ff-ink-200:    #d4d4d4;   /* rules under emphasis */
  --ff-ink-100:    #e6e6e6;   /* default hairline */
  --ff-ink-050:    #f5f5f5;   /* spec block fill, table stripe */
  --ff-white:      #ffffff;

  --ff-bg:         var(--ff-white);
  --ff-fg:         var(--ff-ink-800);
  --ff-fg-strong:  var(--ff-black);
  --ff-muted:      var(--ff-ink-600);
  --ff-border:     var(--ff-ink-100);
  --ff-surface:    var(--ff-ink-050);

  /* --------------------------------------------------------
     TYPE
     Two faces. A grotesque for prose and UI, a mono for every
     piece of analytical data. The mono is not decorative —
     sequences, CAS numbers and lot codes are read character by
     character, and a monospace figure set is how you make
     99.2 and 99.7 distinguishable in a scan.
     Self-host both.
     -------------------------------------------------------- */
  --ff-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-font-data:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --ff-font-heading: "FM Bolyar Sans Pro", "Inter", sans-serif; /* headings/UI labels only — paragraph and table text stays on the standard body font, FM Bolyar's spacing breaks on dense text */
  --ff-font-display: "Nevan", "Inter", sans-serif; /* the Final Form wordmark/brand mark only — never headings or body copy */

  --ff-weight-regular: 400;
  --ff-weight-medium:  500;

  --ff-size-xs:    11px;
  --ff-size-sm:    12px;
  --ff-size-base:  14px;
  --ff-size-md:    16px;
  --ff-size-h5:    18px;
  --ff-size-h4:    22px;
  --ff-size-h3:    28px;
  --ff-size-h2:    36px;
  --ff-size-h1:    48px;

  --ff-leading-tight: 1.15;
  --ff-leading-body:  1.6;
  --ff-leading-data:  1.5;

  --ff-tracking-data:  0.08em;   /* sequences need air between residues */
  --ff-tracking-label: 0.06em;
  --ff-case-heading:   none;     /* sentence case throughout */

  /* --------------------------------------------------------
     SHAPE
     Zero radius everywhere. Hairlines carry the structure.
     -------------------------------------------------------- */
  --ff-radius:       0;
  --ff-hairline:     1px solid var(--ff-border);
  --ff-rule-strong:  1px solid var(--ff-ink-200);
  --ff-rule-heavy:   1px solid var(--ff-black);

  /* --------------------------------------------------------
     SPACING — 4px base
     -------------------------------------------------------- */
  --ff-space-1: 4px;
  --ff-space-2: 8px;
  --ff-space-3: 12px;
  --ff-space-4: 16px;
  --ff-space-5: 24px;
  --ff-space-6: 32px;
  --ff-space-7: 48px;
  --ff-space-8: 64px;
  --ff-space-9: 96px;

  --ff-container:      1400px;
  --ff-container-text: 68ch;
  --ff-gutter:         var(--ff-space-5);
  --ff-grid-gap:       var(--ff-space-5);

  /* --------------------------------------------------------
     MOTION
     -------------------------------------------------------- */
  --ff-duration:  0.2s;
  --ff-ease:      ease-out;

  /* --------------------------------------------------------
     COMPONENTS
     -------------------------------------------------------- */
  --ff-btn-primary-bg:      var(--ff-black);
  --ff-btn-primary-fg:      var(--ff-white);
  --ff-btn-primary-border:  var(--ff-black);
  --ff-btn-primary-hover:   var(--ff-ink-800);

  --ff-btn-secondary-bg:     transparent;
  --ff-btn-secondary-fg:     var(--ff-black);
  --ff-btn-secondary-border: var(--ff-black);

  --ff-input-bg:            var(--ff-white);
  --ff-input-fg:            var(--ff-black);
  --ff-input-border:        var(--ff-ink-200);
  --ff-input-border-focus:  var(--ff-black);
  --ff-input-height:        40px;

  --ff-card-border:      var(--ff-hairline);
  --ff-card-pad:         var(--ff-space-4);
  --ff-card-hover-rule:  var(--ff-rule-heavy);

  /* Spec block — the signature element */
  --ff-spec-bg:       var(--ff-surface);
  --ff-spec-font:     var(--ff-font-data);
  --ff-spec-size:     var(--ff-size-xs);
  --ff-spec-label-fg: var(--ff-muted);
  --ff-spec-row-gap:  var(--ff-space-1);

  /* Chromatogram — 1px stroke, pure black, no fill */
  --ff-trace-stroke:  var(--ff-black);
  --ff-trace-width:   1px;
  --ff-trace-bg:      var(--ff-surface);
  --ff-trace-height:  96px;

  /* Gate modal */
  --ff-gate-overlay:   rgba(0, 0, 0, 0.94);
  --ff-gate-panel-bg:  var(--ff-white);
  --ff-gate-max-width: 480px;

  --ff-focus-ring:        2px solid var(--ff-black);
  --ff-focus-ring-offset: 2px;

  /* RUO disclaimer banner — dark, site-wide, on every page including the gate */
  --ff-disclaimer-bg: var(--ff-black);
  --ff-disclaimer-fg: var(--ff-white);
}

/* ============================================================
   STATUS WITHOUT COLOR
   Availability is encoded in fill and shape. The glyph is a
   12px square rendered in CSS, not a font character, so it
   holds its weight at any zoom and needs no icon dependency.
   ============================================================ */

.ff-status {
  display: inline-flex;
  align-items: center;
  gap: var(--ff-space-2);
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-xs);
  letter-spacing: var(--ff-tracking-label);
  color: var(--ff-fg);
}

.ff-status::before {
  content: "";
  width: 9px;
  height: 9px;
  border: 1px solid var(--ff-black);
  flex: none;
}

.ff-status--in::before {
  background: var(--ff-black);
}

.ff-status--low::before {
  background: linear-gradient(
    to top,
    var(--ff-black) 0 50%,
    transparent 50% 100%
  );
}

.ff-status--out {
  color: var(--ff-muted);
}

.ff-status--out::before {
  border-color: var(--ff-ink-400);
  background: transparent;
}

/* Next batch incoming (WooCommerce "onbackorder") — a diagonal hatch,
   distinct from low-stock's horizontal half-fill, so it reads as "in
   motion" rather than "partially depleted." */
.ff-status--backorder::before {
  background: repeating-linear-gradient(
    45deg,
    var(--ff-black) 0 2px,
    transparent 2px 4px
  );
}

/* ============================================================
   ERRORS WITHOUT COLOR
   A left rule plus an explicit message. Never rely on the
   border alone — the text has to say what happened.
   ============================================================ */

.ff-field--error input,
.ff-field--error select,
.ff-field--error textarea {
  border-color: var(--ff-black);
  border-left-width: 3px;
}

.ff-field__error {
  display: block;
  margin-top: var(--ff-space-2);
  font-family: var(--ff-font-data);
  font-size: var(--ff-size-xs);
  color: var(--ff-black);
}

.ff-field__error::before {
  content: "→ ";
}

/* ============================================================
   QUALITY FLOOR
   ============================================================ */

*:focus-visible {
  outline: var(--ff-focus-ring);
  outline-offset: var(--ff-focus-ring-offset);
}

@media (prefers-reduced-motion: reduce) {
  :root { --ff-duration: 0.01ms; }
}

@media (max-width: 749px) {
  :root {
    --ff-size-h1: 32px;
    --ff-size-h2: 26px;
    --ff-size-h3: 20px;
    --ff-gutter: var(--ff-space-4);
  }
}

/* Print — a spec sheet should survive being printed, and this
   palette costs nothing to make sure it does. */
@media print {
  :root {
    --ff-border: var(--ff-black);
    --ff-surface: var(--ff-white);
  }
}