/* ============================================================================
   EON PEPTIDES — Design Tokens
   Re-derived clinical LIGHT theme. One signature hue (verdigris). Hairline-first.
   Light mode only — there is intentionally no dark theme.
   ============================================================================ */

:root {
  /* ---- Surfaces / paper -------------------------------------------------- */
  --paper:            #FAFAFA; /* page bg — neutral near-white                  */
  --paper-sunk:       #F0F0F2; /* recessed / alternating sections               */
  --surface:          #FFFFFF; /* cards, panels, spec tables, COA viewer        */
  --surface-raised:   #FFFFFF; /* hover-lifted surface (differs by shadow only) */

  /* ---- Ink / text -------------------------------------------------------- */
  --ink:    #15201E;  /* primary text & headlines — verdigris-keyed near-black  */
  --ink-2:  #3A4744;  /* body copy                                             */
  --ink-3:  #5F6A65;  /* tertiary / captions / small labels — AA on paper+sunk */
  --muted:  #9AA39F;  /* DECORATION ONLY (ticks, placeholders) — not body text */

  /* ---- Hairlines / borders ---------------------------------------------- */
  --hairline:        #E6E6E9; /* default ruled line — structural workhorse        */
  --hairline-strong: #D7D7DC; /* hover / active borders                          */

  /* ---- Signature hue (slate blue) --------------------------------------- */
  --accent:        #3A5D7A; /* primary CTA, active states, links, focus, figures (white text = 6.9:1 AA) */
  --accent-press:  #2E4B63; /* pressed / hover / accent-text-on-light (AA)        */
  --accent-tint:   #E5ECF2; /* faint wash — verified badge, active tab            */
  --accent-tint-2: #F2F5F9; /* lightest breath — data rail, signature panel base  */

  /* ---- Categorical accents (descriptions, data viz, research areas) ------ */
  /* Lively but clinical — used to classify mechanisms, bars, cards. Slate    */
  /* accent stays the brand; these add ~50% more color across the site.       */
  --c-emerald:      #0E9E6E; --c-emerald-ink: #0A7A54; --c-emerald-tint: #E6F5EE;
  --c-azure:        #2563EB; --c-azure-ink:   #1D4FD7; --c-azure-tint:   #E5ECFD;
  --c-violet:       #7C3AED; --c-violet-ink:  #6A28D9; --c-violet-tint:  #EEE7FC;
  --c-amber:        #E0831F; --c-amber-ink:   #B45309; --c-amber-tint:   #FBEFDA;
  --c-rose:         #E5484D; --c-rose-ink:    #C5343A; --c-rose-tint:    #FCEAEA;
  --c-teal:         #0E9AA6; --c-teal-ink:    #0A767F; --c-teal-tint:    #E3F4F5;

  /* ---- Data / analytical ------------------------------------------------ */
  --trace:      #3A5D7A; /* chromatogram / mass-spec stroke (== accent)          */
  --trace-soft: #93A9BE; /* secondary trace, under-curve, bond highlight         */
  --success:    #1D7A4C; /* PASS / in-spec / verified status only                */
  --warn:       #9A6A12; /* caution accents/borders (decorative weight)          */
  --warn-text:  #8A5E0F; /* caution TEXT — AA on paper (5.4:1)                   */
  --focus-ring: #3A5D7A; /* focus-visible ring color                            */

  /* ---- Tonal gradients (one hue, two lightness stops) ------------------- */
  --grad-hero:        linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
  --grad-accent:      linear-gradient(160deg, #F2F5F9 0%, #E5ECF2 100%);
  --grad-trace-under: linear-gradient(180deg, rgba(58,93,122,0.10) 0%, rgba(58,93,122,0) 100%);

  /* ---- Typography -------------------------------------------------------- */
  /* Clinical IBM Plex system — scientific/technical register, one sans + one mono */
  --font-sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: var(--font-sans); /* serif retired — clinical brand uses sans display */
  --font-mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-display: clamp(2.6rem, 1rem + 5.2vw, 4.6rem);
  --fs-h1:      clamp(2rem, 1.2rem + 2.8vw, 3rem);
  --fs-h2:      clamp(1.6rem, 1.2rem + 1.4vw, 2rem);
  --fs-h3:      1.375rem;
  --fs-h4:      1.0625rem;
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.78125rem;
  --fs-eyebrow: 0.75rem;
  --fs-meta:    0.8125rem;
  --fs-figure:  clamp(2rem, 1.2rem + 2.6vw, 2.75rem);

  --lh-tight:   1.04;
  --lh-heading: 1.12;
  --lh-body:    1.65;

  --tracking-display: -0.022em;
  --tracking-h1:      -0.02em;
  --tracking-h2:      -0.015em;
  --tracking-eyebrow:  0.16em;

  /* ---- Spacing scale ----------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --section-pad: clamp(4rem, 2rem + 6vw, 7.5rem);
  --gutter:      clamp(1.25rem, 0.5rem + 2vw, 2rem);

  /* ---- Containers -------------------------------------------------------- */
  --container:    1280px;
  --container-md: 1200px;
  --container-sm: 1000px;
  --container-xs: 860px;
  --container-text: 760px;

  /* ---- Radii (restrained, near-architectural) --------------------------- */
  --radius-0:    0px;
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ---- Elevation (hairline-first, cool, low-alpha) ---------------------- */
  --shadow-hairline: 0 1px 0 0 rgba(21,32,30,0.04);
  --shadow-1: 0 1px 2px rgba(21,32,30,0.05), 0 0 0 1px rgba(21,32,30,0.03);
  --shadow-2: 0 4px 12px -2px rgba(21,32,30,0.08), 0 0 0 1px rgba(21,32,30,0.04);
  --shadow-3: 0 12px 32px -6px rgba(21,32,30,0.10), 0 2px 8px -2px rgba(21,32,30,0.06);

  /* ---- Motion tokens ----------------------------------------------------- */
  --dur-instant: 120ms;
  --dur-fast:    200ms;
  --dur-base:    340ms;
  --dur-slow:    440ms;
  --dur-draw:    1100ms;
  --dur-countup: 1200ms;

  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-magnetic: cubic-bezier(0.33, 1, 0.68, 1);

  --travel-fadeup:    20px;
  --travel-fadeup-sm: 16px;
  --lift-card:        -3px;
  --lift-card-strong: -4px;

  --stagger-step: 32ms;

  /* ---- Animation-kit bridge (eon-animations.css reads these) ------------- */
  --eon-accent:       #3A5D7A;
  --eon-accent-rgb:   58, 93, 122;
  --eon-accent-dark:  #2E4B63;
  --eon-accent-light: #E5ECF2;
  --eon-ink:          #15201E;
  --eon-muted:        #5F6A65;
  --eon-surface:      #FFFFFF;
  --eon-line:         #E4E2DB;
  --eon-radius:       8px;
  --eon-ease:         cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Z layers ---------------------------------------------------------- */
  --z-grain:    1;
  --z-content:  2;
  --z-rail:     40;
  --z-nav:      50;
  --z-progress: 60;
  --z-cursor:   9999;
}