/* ==========================================================================
   Novigen Biotech — design tokens

   The visual language follows mercor.com: a single sans family (Inter), a
   near-monochrome neutral scale on white, large light-weight headings with tight
   tracking, one saturated accent, small radii, whisper-light shadows and hairline
   dividers instead of coloured bands.

   Measured from mercor.com: Inter 400/500 · #000 body text · gray-500 secondary ·
   indigo-600 primary · radius 6px buttons / 8px cards / 9999px chips ·
   shadow 0 1px 2px rgba(0,0,0,.05) · 1px #E5E7EB borders · 68px header.

   Token NAMES are kept stable so components keep working; only their values changed.
   Components may not introduce raw values.
   ========================================================================== */

:root {
  /* ------------------------------------------------------- neutral scale */
  --c-white:        #FFFFFF;
  --gray-50:        #F9FAFB;
  --gray-100:       #F3F4F6;
  --gray-200:       #E5E7EB;
  --gray-300:       #D1D5DB;
  --gray-400:       #9CA3AF;
  --gray-500:       #6B7280;
  --gray-600:       #4B5563;
  --gray-700:       #374151;
  --gray-800:       #1F2937;
  --gray-900:       #111827;
  --c-black:        #000000;

  /* ------------------------------------------------------- client palette
     Deep Navy #12304A  header, headings, footer
     Teal      #087F8C  scientific and technical accents
     Green     #4FAF72  CTA and highlights
     Blue-Grey #F4F8FA  section backgrounds
     Charcoal  #25313A  body text

     Measured, because two of them cannot be used the obvious way:

       Green is 2.72:1 on white and 2.72:1 behind white — it fails as a text colour AND as a
       fill behind a white label. It works as a CTA fill with a CHARCOAL label (4.88:1), which
       is how it is defined below. Never put white text on it.

       Teal is 4.75:1 on white but only 4.44:1 on the blue-grey section ground — under the 4.5
       body minimum. `--c-teal-text` is a fractionally darker teal for text, clearing both
       (5.44:1 and 5.09:1). Brand teal itself is unchanged and still used for fills and marks. */
  --c-brand-navy:   #12304A;
  --c-brand-teal:   #087F8C;
  --c-teal-text:    #07757F;   /* text-safe teal: 5.44:1 white, 5.09:1 on blue-grey */
  --c-brand-green:  #4FAF72;
  --c-brand-grey:   #F4F8FA;
  --c-brand-charcoal: #25313A;

  /* The accent the components already reference. Navy carries interactive text and primary
     fills because it is the only brand colour that clears every ground at 13.57:1. */
  --c-accent:       var(--c-brand-navy);
  --c-accent-hover: #0C2337;   /* navy, darkened for hover */
  --c-accent-soft:  #E8EFF4;   /* navy wash for tinted surfaces */
  --c-accent-text:  var(--c-teal-text);

  /* The CTA. Green fill, charcoal label — the only legible pairing this colour allows. */
  --c-accent-bright: var(--c-brand-green);
  --c-accent-mint:   var(--c-brand-teal);
  --c-accent-on-bright: var(--c-brand-charcoal);   /* 4.88:1 on green */

  /* ------------------------------------- legacy brand aliases (remapped)
     Earlier components reference these names. They now resolve into the
     monochrome system so nothing has to be rewritten to stay consistent. */
  --c-sand:         var(--c-brand-grey);
  --c-sand-dark:    var(--gray-100);
  --c-sand-deep:    var(--gray-200);
  --c-teal:         var(--c-brand-navy);
  --c-teal-050:     var(--gray-50);
  --c-teal-100:     var(--gray-100);
  --c-teal-600:     var(--c-teal-text);
  --c-teal-700:     var(--c-accent-hover);
  --c-teal-800:     var(--gray-900);
  --c-teal-900:     var(--c-black);
  --c-navy:         var(--c-brand-navy);
  --c-navy-500:     var(--gray-600);
  --c-navy-700:     var(--c-accent-hover);
  --c-navy-900:     var(--c-black);
  --c-emerald:      var(--c-teal-text);
  --c-emerald-700:  var(--c-accent-hover);
  --c-emerald-100:  var(--c-accent-soft);
  --c-green:        var(--c-brand-green);
  --c-amber:        var(--c-accent);
  --c-amber-700:    var(--c-accent-hover);
  --c-amber-100:    var(--c-accent-soft);

  /* --------------------------------------------------------------- text */
  --c-ink:          var(--c-brand-charcoal);
  --c-ink-80:       var(--gray-700);
  --c-ink-60:       var(--gray-500);
  --c-ink-40:       var(--gray-400);   /* borders and icons only — 2.5:1 on white */
  --c-ink-inverse:  var(--c-white);
  --c-ink-inverse-70: rgba(255, 255, 255, 0.72);

  /* ---------------------------------------------------------- structure */
  --c-line:         var(--gray-200);
  --c-line-soft:    var(--gray-100);
  --c-line-strong:  var(--gray-300);
  --c-line-dark:    rgba(255, 255, 255, 0.16);

  --c-ground:       var(--c-white);
  --c-ground-alt:   var(--c-brand-grey);
  --c-ground-tint:  var(--c-accent-soft);   /* the third band in the section rhythm */
  --c-ground-dark:  var(--gray-900);

  /* The scrim over the hero video. The dark end sits under the headline so text always
     lands on the darkest part of the wash; the accent end carries the brand. Measured:
     white text holds 6.4:1 against the lightest point even if the footage is pure white. */
  --scrim-from:     rgba(9, 12, 20, 0.88);
  --scrim-to:       rgba(18, 48, 74, 0.86);   /* Deep Navy #12304A at 86% */

  /* The statistics panel rides the accent, not a colour of its own, so a re-brand carries it
     the way every other surface is carried. Both stops clear 4.5:1 against white by a wide
     margin, which the 14px labels need. */
  /* Navy sweeping into green. The green stop is placed at 190% — past the right edge of the
     box — on purpose: taken to a full 100% the white figures on the green end measure 2.72:1
     and are unreadable. Running the ramp long keeps both brand colours and the same visible
     sweep while the worst point any text can land on is 5.60:1. Do not pull the stop back to
     100% without changing the text colour. */
  --stats-from:     #12304A;
  --stats-to:       #4FAF72;
  --stats-stop:     190%;

  /* How far the panel rises into the hero above it. The hero adds the same amount to its own
     bottom padding, so the overlap never crowds the strapline. */
  --stats-overlap:  clamp(2.75rem, 5vw, 4.5rem);

  /* ------------------------------------------------------------- states */
  --c-focus:        var(--c-accent);
  --c-success:      #059669;
  --c-success-bg:   #ECFDF5;
  --c-warning:      #B45309;
  --c-warning-bg:   #FFFBEB;
  --c-danger:       #DC2626;
  --c-danger-bg:    #FEF2F2;
  --c-info:         var(--c-accent);
  --c-info-bg:      var(--c-accent-soft);

  /* ------------------------------------------------------ data visuals */
  --c-data-1:       var(--c-accent);
  --c-data-2:       #8274FF;
  --c-data-3:       #E6836C;
  --c-data-4:       #FBC682;
  --c-data-5:       #C65F76;
  --c-data-6:       var(--gray-300);

  /* ------------------------------------------------------------- fonts */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-serif:   var(--font-sans);   /* one family throughout */
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* --------------------------------------------------------- type scale
     Headings are light (400) with tight tracking — the defining trait of
     this system. Weight is carried by size, not by boldness. */
  --t-display: clamp(2.5rem, 1.6rem + 3.4vw, 4rem);      /* 40 → 64 */
  --t-h1:      clamp(2rem, 1.5rem + 2vw, 3rem);          /* 32 → 48 */
  --t-h2:      clamp(1.625rem, 1.35rem + 1.1vw, 2.25rem);/* 26 → 36 */
  --t-h3:      clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);
  --t-h4:      1rem;
  --t-lead:    clamp(1.0625rem, 1rem + 0.28vw, 1.25rem);
  --t-body:    1rem;
  --t-small:   0.875rem;
  --t-micro:   0.8125rem;
  --t-stat:    clamp(2rem, 1.4rem + 2.4vw, 3.25rem);

  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semi:    600;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relaxed:1.65;

  --track-tight: -0.025em;
  --track-snug:  -0.015em;
  --track-micro: 0;          /* no letter-spaced uppercase in this system */

  --measure:       68ch;
  --measure-serif: 66ch;
  --measure-short: 46ch;

  /* ------------------------------------------------------------ spacing */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  5rem;
  --s-10: 6rem;
  --s-11: 8rem;

  --section-y: clamp(3rem, 2.2rem + 3vw, 5.5rem);
  --gutter:    clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  --container-max: 1280px;
  --container-narrow: 44rem;
  /* A centred column for pages with no contents rail: wide enough that a two-up card grid has
     room, while the paragraphs inside it stay capped at `--measure`. */
  --container-reading: 56rem;

  /* ---------------------------------------------------------- geometry */
  --r-0: 0;
  --r-1: 6px;      /* buttons, inputs */
  --r-2: 8px;      /* cards, panels */
  --r-3: 12px;     /* large surfaces */
  --r-pill: 9999px;

  --border:        1px solid var(--c-line);
  --border-soft:   1px solid var(--c-line-soft);
  --border-strong: 1px solid var(--c-line-strong);
  --border-dark:   1px solid var(--c-line-dark);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-2: 0 2px 19px -4px rgba(1, 1, 63, 0.10);
  --shadow-3: 0 12px 32px -8px rgba(1, 1, 63, 0.16);

  /* ------------------------------------------------------------ motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur:      200ms;
  --dur-slow: 300ms;

  /* ------------------------------------------------------------ layers */
  --z-base: 1;
  --z-rail: 20;
  --z-sticky: 60;
  --z-header: 80;
  --z-drawer: 90;
  --z-modal: 100;
  --z-toast: 120;

  /* ----------------------------------------------------------- pattern */
  --pattern-lattice:
    repeating-linear-gradient(60deg, currentColor 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-60deg, currentColor 0 1px, transparent 1px 26px);
  --pattern-grid:
    repeating-linear-gradient(0deg, currentColor 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 28px);
  --pattern-ticks:
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 16px);

  --header-h: 68px;
  --utility-h: 2.25rem;
}

/*
 * There are no dark bands in this system — the page is white throughout, separated by
 * hairlines rather than colour. `.on-dark` is kept so existing markup keeps working, but
 * it no longer inverts anything; it simply holds the light values.
 */
.on-dark {
  --c-ink:         var(--c-black);
  --c-ink-80:      var(--gray-700);
  --c-ink-60:      var(--gray-500);
  --c-ink-40:      var(--gray-400);
  --c-line:        var(--gray-200);
  --c-line-strong: var(--gray-300);
  --c-line-dark:   var(--gray-200);
  --c-ground:      var(--c-white);
  --c-ground-alt:  var(--gray-50);
  --c-focus:       var(--c-accent);
  --c-accent-text: var(--c-accent);
  --c-ink-inverse: var(--c-black);
  --c-ink-inverse-70: var(--gray-500);
}

/*
 * `.on-media` is the one genuinely inverted scope in the system: content sitting on the
 * hero's video, over a scrim dark enough to guarantee the ratios below. It is deliberately
 * a different class from `.on-dark` — `.on-dark` is neutralised everywhere and must stay
 * that way, so inverting it would flip the footer, the page heroes and the CTA bands too.
 *
 * Anything scoped here renders on the scrim, never on the raw video frame.
 *
 * `.page-hero` is listed alongside it because every interior hero now carries the same
 * ground — that way all eighteen page-hero templates inherit the inverted scope without
 * each one having to add a class.
 */
.on-media,
.page-hero {
  --c-ink:         var(--c-white);
  --c-ink-80:      rgba(255, 255, 255, 0.92);
  --c-ink-60:      rgba(255, 255, 255, 0.88);   /* 5.4:1 even over white footage */
  --c-ink-40:      rgba(255, 255, 255, 0.42);   /* hairlines only, never text */
  --c-line:        rgba(255, 255, 255, 0.22);
  --c-line-soft:   rgba(255, 255, 255, 0.14);
  --c-line-strong: rgba(255, 255, 255, 0.34);
  --c-line-dark:   rgba(255, 255, 255, 0.22);
  --c-ground:      transparent;
  --c-ground-alt:  rgba(255, 255, 255, 0.08);
  --c-focus:       var(--c-white);
  --c-accent-text: var(--c-white);
  --c-ink-inverse: var(--c-white);
  --c-ink-inverse-70: rgba(255, 255, 255, 0.88);
}