/* ==========================================================================
   Adamant Laboratories — Colors & Type
   ==========================================================================
   Dark green / light green / white / black palette for a clinical, cutting-edge,
   trust-forward research brand. Primary brand color reads as deep forest green;
   accent is a brighter laboratory green used for interactive / positive moments.
   ========================================================================== */

:root {
  /* ---------- Brand greens (PRIMARY) ---------- */
  --ink:                #0D3B12;  /* primary-dark — brand ink, headings, dark UI  */
  --forest:             #1B5E20;  /* primary       — core brand green            */
  --forest-light:       #2E7D32;  /* primary-light — hover, gradient mid         */
  --lab-green:          #4CAF50;  /* accent        — CTAs, focus, positive signal*/
  --sprout:             #81C784;  /* accent-light  — highlights on dark          */
  --mint:               #C8E6C9;  /* border        — tints, quiet dividers       */
  --moss:               #A5D6A7;  /* border-dark   — hovered borders             */

  /* ---------- Neutrals ---------- */
  --white:              #FFFFFF;
  --surface:            #FAFDF7;  /* paper, app background (warm green-white)    */
  --surface-alt:        #E8F5E9;  /* subtle green tint for filled surfaces       */
  --surface-cool:       #F7FBF7;  /* trust bar, category section                 */
  --hairline:           #DDE8DD;  /* cool hairline on green-tinted surfaces      */
  --hairline-warm:      #E8F0E8;  /* warm hairline on pure white                 */
  --ink-body:           #1A1A1A;  /* body text                                   */
  --ink-muted:          #5A6B5E;  /* secondary text                              */
  --ink-quiet:          #8A9E8E;  /* tertiary / disclaimer                       */
  --ink-ghost:          #9BB09B;  /* placeholders                                */
  --black:              #111111;

  /* ---------- Semantic ---------- */
  --fg-1:               var(--ink-body);
  --fg-2:               var(--ink-muted);
  --fg-3:               var(--ink-quiet);
  --fg-on-dark:         rgba(255,255,255,0.92);
  --fg-on-dark-muted:   rgba(255,255,255,0.65);
  --fg-on-dark-quiet:   rgba(255,255,255,0.45);

  --bg-1:               var(--surface);
  --bg-2:               var(--surface-alt);
  --bg-3:               var(--surface-cool);
  --bg-dark:            var(--ink);

  --border-1:           var(--mint);
  --border-2:           var(--moss);
  --border-dark:        rgba(255,255,255,0.1);

  /* ---------- Status ---------- */
  --success:            #2E7D32;
  --warning:            #F57F17;
  --warning-bg:         #FFF8E1;
  --warning-text:       #5D4037;
  --danger:             #C62828;
  --info:               #1565C0;

  /* ---------- Signature gradients ---------- */
  --grad-forest:        linear-gradient(140deg, #0D3B12 0%, #1B5E20 100%);
  --grad-hero-panel:    linear-gradient(145deg, #0D3B12 0%, #1B5E20 55%, #2E7D32 100%);
  --grad-glow:          radial-gradient(circle, rgba(76,175,80,0.22) 0%, transparent 70%);
  --grad-halo-soft:     radial-gradient(circle, rgba(76,175,80,0.12) 0%, transparent 65%);

  /* ---------- Typography families ---------- */
  --font-sans:          'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display:       'Inter', 'Segoe UI', system-ui, sans-serif; /* display reuses Inter 800 */
  --font-mono:          'JetBrains Mono', ui-monospace, 'SF Mono', Menolo, monospace;

  /* ---------- Type scale ---------- */
  --text-2xs:   0.6875rem;   /* 11  — eyebrow small                        */
  --text-xs:    0.75rem;     /* 12  — legal, eyebrow                       */
  --text-sm:    0.875rem;    /* 14  — body small, UI                       */
  --text-base:  1rem;        /* 16  — body                                 */
  --text-lg:    1.125rem;    /* 18  — body large                           */
  --text-xl:    1.25rem;     /* 20                                         */
  --text-2xl:   1.5rem;      /* 24  — h3                                   */
  --text-3xl:   1.875rem;    /* 30  — h2                                   */
  --text-4xl:   2.25rem;     /* 36  — h1 small                             */
  --text-5xl:   3rem;        /* 48  — h1                                   */
  --text-6xl:   3.5rem;      /* 56  — hero                                 */

  /* ---------- Leading / tracking / weight ---------- */
  --leading-tight:    1.1;
  --leading-snug:     1.25;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;
  --leading-loose:    1.75;

  --tracking-tight:    -0.025em;  /* large display                */
  --tracking-snug:     -0.015em;  /* h2/h3                        */
  --tracking-normal:   0;
  --tracking-wide:     0.05em;    /* brand name                   */
  --tracking-wider:    0.12em;    /* eyebrow, tagline             */
  --tracking-widest:   0.18em;    /* hero eyebrow                 */

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ---------- Spacing (4px base) ---------- */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* ---------- Radii ---------- */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-xl:    20px;
  --radius-2xl:   24px;
  --radius-full:  9999px;

  /* ---------- Shadows ---------- */
  --shadow-sm:     0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:     0 4px 6px rgba(0,0,0,0.07);
  --shadow-lg:     0 10px 15px rgba(0,0,0,0.10);
  --shadow-xl:     0 20px 25px rgba(0,0,0,0.10);
  --shadow-lift:   0 8px 20px rgba(13,59,18,0.22);       /* green-biased lift    */
  --shadow-deep:   0 24px 48px rgba(0,0,0,0.16);         /* feature card hover   */
  --shadow-focus:  0 0 0 3px rgba(76,175,80,0.15);       /* input focus ring     */

  /* ---------- Motion ---------- */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);   /* reveal / lift / cards    */
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:       150ms;
  --dur-base:       250ms;
  --dur-slow:       350ms;
  --dur-reveal:     700ms;

  /* ---------- Layout ---------- */
  --container-max:    1280px;
  --container-narrow: 960px;
  --sidebar-width:    280px;

  /* ---------- Z-index ---------- */
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-banner:     500;
  --z-splash:     600;
}

/* ==========================================================================
   Semantic type classes (h1-h6, body, code, eyebrow)
   Use these on marketing pages. On product chrome, use the raw --text-*
   + --weight-* tokens so the system stays composable.
   ========================================================================== */

.font-display,
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

h1 em, .h1 em {
  font-style: normal;
  color: var(--lab-green);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
}

h2 em, .h2 em {
  font-style: normal;
  color: var(--sprout);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--ink);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--lab-green);
}

.eyebrow--on-dark {
  color: rgba(129, 199, 132, 0.65);
}

.tagline {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.brandmark {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--ink);
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--ink-muted);
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--ink-muted);
}

small, .small {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.legal {
  font-size: var(--text-xs);
  color: var(--ink-quiet);
  line-height: var(--leading-relaxed);
}

code, .code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.mono-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-body);
  word-break: break-all;
}