/* ============================================================
   ARCOVEX BIOTECH — DESIGN TOKENS  v2.0
   ------------------------------------------------------------
   Single source of truth for colour, type, space, shape, depth
   and motion. Load BEFORE arcovex.css on every page.

   Layers
     1. Primitives   raw values (never use directly in components)
     2. Semantic     what a value is FOR  (--ax-*)
     3. Legacy       aliases so v1 class names keep working

   Theme: light by default. [data-theme="dark"] on <html> or any
   section swaps the semantic layer only.
   ============================================================ */

:root {
  /* ---------- 1. PRIMITIVES ---------- */
  /* Neutral ramp — very slightly warm, clinical not sterile */
  --n-0:   #FFFFFF;
  --n-25:  #FBFBF9;
  --n-50:  #F6F6F3;
  --n-100: #EFEFEB;
  --n-150: #E7E7E2;
  --n-200: #DCDCD6;
  --n-300: #C4C5C0;
  --n-400: #9A9DA1;
  --n-500: #72767C;
  --n-600: #555960;
  --n-700: #383C42;
  --n-800: #22252A;
  --n-900: #15171A;
  --n-950: #0D0F0E;

  /* Brand — taken from the vial label navy */
  --brand-900: #121A4A;
  --brand-700: #1D2A6B;
  --brand-500: #34479C;
  --brand-100: #E6E9F6;

  /* Category hues (accent only — never large fills) */
  --hue-recovery:  #2D7A4F;
  --hue-metabolic: #1A5FAB;
  --hue-longevity: #B08A3E;
  --hue-cognitive: #6B3FA0;
  --hue-aesthetic: #1A8080;
  --hue-general:   #787E88;

  /* ---------- 2. SEMANTIC ---------- */
  /* Surfaces */
  --ax-bg:            var(--n-50);    /* page */
  --ax-bg-raised:     var(--n-0);     /* cards, panels */
  --ax-bg-sunken:     var(--n-100);   /* wells, table stripes */
  --ax-bg-muted:      var(--n-150);
  --ax-bg-inverse:    var(--n-950);   /* dark bands */
  --ax-bg-inverse-2:  #16191D;
  --ax-night:         #0B1420;        /* deep product hero */

  /* Text */
  --ax-fg:            var(--n-950);   /* headings */
  --ax-fg-body:       var(--n-800);
  --ax-fg-muted:      var(--n-500);
  --ax-fg-faint:      var(--n-400);
  --ax-fg-inverse:    #F2F2EE;
  --ax-fg-inverse-muted: #9EA2AA;

  /* Lines */
  --ax-line:          rgba(13, 15, 14, 0.09);
  --ax-line-strong:   rgba(13, 15, 14, 0.16);
  --ax-line-inverse:  rgba(255, 255, 255, 0.12);

  /* Actions */
  --ax-action:        var(--n-950);
  --ax-action-hover:  var(--n-700);
  --ax-action-fg:     #FFFFFF;
  --ax-brand:         var(--brand-700);
  --ax-brand-soft:    var(--brand-100);

  /* Status */
  --ax-success:       #1F7A4D;
  --ax-success-bright:#34C98A;        /* on dark surfaces */
  --ax-success-bg:    #E7F3EC;
  --ax-warning:       #9A6A00;
  --ax-warning-ink:   #6E5108;
  --ax-warning-bg:    #FBF3E1;
  --ax-warning-line:  #E8D89A;
  --ax-danger:        #B42318;
  --ax-danger-bg:     #FDECEA;
  --ax-danger-line:   #F5C2BD;
  --ax-info:          var(--hue-metabolic);
  --ax-info-bg:       #EAF1FB;
  --ax-gold-bright:   #D4A84B;        /* gold text on dark */

  /* Verification (trust signal) */
  --ax-verified:      var(--brand-700);
  --ax-verified-bg:   var(--brand-100);

  /* Category: base / tint background / readable ink */
  --cat-recovery:  var(--hue-recovery);   --cat-recovery-bg:  #E5F2EA; --cat-recovery-ink:  #1E5636;
  --cat-metabolic: var(--hue-metabolic);  --cat-metabolic-bg: #E6EFFA; --cat-metabolic-ink: #134479;
  --cat-longevity: var(--hue-longevity);  --cat-longevity-bg: #F7F0E1; --cat-longevity-ink: #6E5524;
  --cat-cognitive: var(--hue-cognitive);  --cat-cognitive-bg: #F0EAF8; --cat-cognitive-ink: #4A2A71;
  --cat-aesthetic: var(--hue-aesthetic);  --cat-aesthetic-bg: #E2F3F3; --cat-aesthetic-ink: #125A5A;
  --cat-general:   var(--hue-general);    --cat-general-bg:   #EEEFF1; --cat-general-ink:   #4C5158;

  /* ---------- TYPE ---------- */
  --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid scale — hits the v1 px values at ~1440px wide */
  --text-2xs:  0.6875rem;                                    /* 11 */
  --text-xs:   0.75rem;                                      /* 12 */
  --text-sm:   clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);   /* 13–14 */
  --text-base: clamp(0.9375rem, 0.91rem + 0.12vw, 1rem);      /* 15–16 */
  --text-md:   clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);      /* 16–17 */
  --text-lg:   clamp(1.125rem, 1.04rem + 0.4vw, 1.25rem);     /* 18–20 */
  --text-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);        /* 20–24 */
  --text-2xl:  clamp(1.5rem, 1.2rem + 1.2vw, 2rem);           /* 24–32 */
  --text-3xl:  clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem);      /* 30–44 */
  --text-4xl:  clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);       /* 36–60 */
  --text-5xl:  clamp(2.75rem, 1.5rem + 4.8vw, 5rem);          /* 44–80 */

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.6;
  --tracking-display: -0.03em;
  --tracking-label:   0.08em;    /* uppercase eyebrows */
  --tracking-mono:    0;

  /* ---------- SPACE (4px base) ---------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-section: clamp(64px, 5vw + 32px, 128px);

  /* ---------- LAYOUT ---------- */
  --container:     1240px;
  --container-wide: 1440px;
  --container-text: 68ch;
  --gutter:        clamp(20px, 3vw, 40px);
  --nav-h:         64px;

  /* ---------- SHAPE ---------- */
  --r-xs: 4px;  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-xl: 20px;  --r-pill: 999px;

  /* ---------- DEPTH ---------- */
  --shadow-xs: 0 1px 0 rgba(13,15,14,0.04);
  --shadow-sm: 0 1px 2px rgba(13,15,14,0.05), 0 1px 4px rgba(13,15,14,0.04);
  --shadow-md: 0 2px 6px rgba(13,15,14,0.05), 0 8px 24px -8px rgba(13,15,14,0.12);
  --shadow-lg: 0 4px 10px rgba(13,15,14,0.05), 0 24px 48px -16px rgba(13,15,14,0.20);
  --focus-ring: 0 0 0 2px var(--ax-bg), 0 0 0 4px var(--brand-500);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;  --dur-base: 200ms;  --dur-slow: 360ms;

  /* ---------- LAYERS ---------- */
  --z-base: 1; --z-sticky: 50; --z-nav: 100; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100;

  /* ---------- 3. LEGACY ALIASES (v1 names → v2 tokens) ---------- */
  --ax-white:      var(--ax-bg-raised);
  --ax-surface:    var(--ax-bg);
  --ax-surface-2:  var(--ax-bg-sunken);
  --ax-border:     var(--n-150);
  --ax-mid:        var(--ax-fg-faint);
  --ax-text-muted: var(--ax-fg-muted);
  --ax-text-body:  var(--ax-fg-body);
  --ax-text-head:  var(--ax-fg);
  --ax-slate:      var(--n-900);
  --ax-dark:       var(--ax-bg-inverse);
  --sp-xs: var(--space-1); --sp-sm: var(--space-2); --sp-md: var(--space-4); --sp-lg: var(--space-6);
  --sp-xl: var(--space-10); --sp-2xl: var(--space-16); --sp-3xl: var(--space-24); --sp-4xl: 128px;
}

/* ---------- DARK THEME (semantic layer only) ---------- */
[data-theme="dark"] {
  --ax-bg:           #0B0C0E;
  --ax-bg-raised:    #131519;
  --ax-bg-sunken:    #0F1013;
  --ax-bg-muted:     #1B1E23;
  --ax-bg-inverse:   #F6F6F3;
  --ax-fg:           #F2F2EE;
  --ax-fg-body:      #C9CBD0;
  --ax-fg-muted:     #8D9198;
  --ax-fg-faint:     #61656C;
  --ax-line:         rgba(255,255,255,0.08);
  --ax-line-strong:  rgba(255,255,255,0.16);
  --ax-action:       #F2F2EE;
  --ax-action-hover: #FFFFFF;
  --ax-action-fg:    #0B0C0E;
  --ax-border:       #24272D;
  --focus-ring: 0 0 0 2px var(--ax-bg), 0 0 0 4px #8EA0F0;
  color-scheme: dark;
}

/* ============================================================
   FOUNDATION UTILITIES
   ============================================================ */

/* Mono data face — lot numbers, IDs, purity, specs, prices */
.t-data, .mono, code, kbd, samp,
.verified-id-value, .verified-module-ids, .verified-search-input,
.ax-verified-lot-num, .ax-verified-lot-purity, .mvb-lot,
.batch-card-lot, .batch-card-footer-id,
.label-mock-val, .digital-mock-row-val, .testing-pillar-threshold-value {
  font-family: var(--font-mono) !important;
  font-feature-settings: "zero" 1, "tnum" 1;
  letter-spacing: var(--tracking-mono) !important;
}
/* mono runs wider than Manrope — trim inline data slightly */
.pc-sv.t-data, .cs-v.t-data, .specs-flat-val.t-data, .ax-verified-lot-num, .ax-verified-lot-purity { font-size: 0.94em; }
.t-num { font-variant-numeric: tabular-nums; }
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--ax-fg-muted);
}

/* Logo */
.ax-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ax-fg); text-decoration: none; }
.ax-logo svg { display: block; flex-shrink: 0; }
.ax-logo-mark { width: 30px; height: 30px; }
.ax-logo-word { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.14em; line-height: 1; }
.ax-logo-sub  { font-family: var(--font-display); font-weight: 400; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--ax-fg-muted); line-height: 1; margin-left: -2px; }
.footer .ax-logo, [data-theme="dark"] .ax-logo { color: var(--ax-fg-inverse); --ax-logo-fg: var(--n-950); }
.footer .ax-logo { margin-bottom: var(--space-4); }
.footer .ax-logo-sub { color: var(--ax-fg-inverse-muted); }

/* Accessible focus everywhere */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Nav fit with the full lockup */
.nav-logo { margin-right: var(--space-8); flex-shrink: 0; }
.nav-links a { white-space: nowrap; }
@media (max-width: 1360px) { .nav .ax-logo-sub { display: none; } .nav-links { gap: var(--space-5); } }