/* ============================================================
   Clarion Peptides — Colors & Type Tokens
   Source: 2026-04-16 Distributor Brand Package v1.0
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* Editorial serif — user-provided brand font, added April 2026.
   Use sparingly: long-form research copy, pull quotes, editorial moments.
   Not for UI, labels, or data. */
@font-face {
  font-family: 'Clarion Serif';
  src: url('fonts/font_file.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ────────────────  BRAND COLORS  ──────────────── */
  /* Primary palette */
  --clarion-forest:   #085041;  /* Pantone 350 C · primary brand, dark surfaces, labels */
  --clarion-teal:     #1D9E75;  /* Pantone 347 C · accent, links, highlights, top bands */
  --clarion-mint:     #9FE1CB;  /* Pantone 337 C · descriptor text on forest, quiet accents */

  /* Support palette */
  --clarion-frost:    #F0FBF6;  /* backgrounds, COA paper, inserts */
  --clarion-charcoal: #2C2C2A;  /* Pantone Black 7 C · body text */
  --clarion-muted:    #6B8C82;  /* captions, rules, secondary text (sage) */
  --clarion-border:   #C5E8D8;  /* dividers on light surfaces */
  --clarion-surface:  #FAFCFB;  /* table stripe, card base on white */
  --clarion-hairline: #EEF4F1;  /* 1px borders, table rules */

  /* Semantic — light surfaces */
  --bg:         #FFFFFF;
  --bg-frost:   var(--clarion-frost);
  --bg-surface: var(--clarion-surface);
  --fg1:        var(--clarion-charcoal);      /* body */
  --fg2:        var(--clarion-muted);         /* secondary */
  --fg-brand:   var(--clarion-forest);        /* headers */
  --fg-accent:  var(--clarion-teal);          /* labels, meta */
  --border:     var(--clarion-hairline);
  --border-strong: var(--clarion-border);

  /* Semantic — dark (forest) surfaces */
  --on-forest-fg1:     #FFFFFF;
  --on-forest-fg2:     rgba(157,225,203,0.75);  /* mint @ 75% */
  --on-forest-fg3:     rgba(157,225,203,0.45);  /* meta */
  --on-forest-hairline: rgba(157,225,203,0.18);
  --on-forest-surface:  rgba(255,255,255,0.08);

  /* Status (derived, used sparingly — dos/don'ts, warnings) */
  --status-ok:   #27AE60;
  --status-warn: #E67E22;
  --status-err:  #E74C3C;
  --warn-bg:     #FFF8F0;
  --warn-border: #FFE4B0;
  --warn-fg:     #7A5500;

  /* ────────────────  TYPOGRAPHY  ──────────────── */
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif: 'Clarion Serif', 'Source Serif Pro', Georgia, serif;

  /* Type scale (document / web — 1rem = 16px) */
  --text-6xl:  42px;   /* marquee / cover */
  --text-5xl:  32px;   /* page H1 */
  --text-4xl:  24px;   /* section titles */
  --text-3xl:  20px;   /* subsection */
  --text-2xl:  16px;   /* large body / lead */
  --text-xl:   14px;
  --text-lg:   13px;
  --text-md:   12px;   /* body default */
  --text-sm:   11px;
  --text-xs:   10px;   /* captions, metadata */
  --text-2xs:  9px;    /* eyebrow labels, page furniture */

  /* Weights — strict hierarchy from brand package */
  --fw-light: 300;       /* PEPTIDES descriptor */
  --fw-regular: 400;     /* body copy */
  --fw-medium: 500;
  --fw-semibold: 600;    /* mono data */
  --fw-bold: 700;
  --fw-extrabold: 800;   /* section headers */
  --fw-black: 900;       /* CLARION wordmark, hero */

  /* Tracking (from brand spec) */
  --tracking-wordmark:  0.09em;   /* +60 at 22px for CLARION */
  --tracking-descriptor: 0.32em;  /* +320 for PEPTIDES */
  --tracking-eyebrow:    0.16em;  /* section kickers */
  --tracking-mono:       0.08em;  /* product codes */
  --tracking-disclaim:   0.06em;  /* regulatory */
  --tracking-normal:     0;

  /* Leading */
  --leading-tight: 1.1;
  --leading-snug:  1.3;
  --leading-body:  1.65;   /* Inter body spec */
  --leading-data:  1.4;    /* mono specs */
  --leading-disclaim: 1.7;

  /* ────────────────  SPACING & SHAPE  ──────────────── */
  --space-0:  0;
  --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;

  --radius-none: 0;
  --radius-xs:   2px;   /* label inner boxes */
  --radius-sm:   3px;
  --radius-md:   6px;   /* label outer */
  --radius-lg:   8px;   /* info boxes, cards */
  --radius-xl:   10px;  /* large cards, swatches */
  --radius-2xl:  12px;  /* hero cards, contact block */
  --radius-pill: 40px;  /* top nav pill */

  /* Shadows — conservative, never on logo */
  --shadow-sm:   0 2px 8px rgba(0,0,0,.07);
  --shadow-md:   0 3px 14px rgba(0,0,0,.12);
  --shadow-lg:   0 4px 24px rgba(0,0,0,.12);
  --shadow-pill: 0 4px 20px rgba(0,0,0,.30);   /* floating forest nav */

  /* Hairline rules */
  --rule: 1px solid var(--border);
  --rule-strong: 1px solid var(--border-strong);
}

/* ────────────────  SEMANTIC ELEMENTS  ──────────────── */
html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  color: var(--fg1);
  background: var(--bg);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  color: var(--fg-brand);
  letter-spacing: -0.01em;
}
h2, .h2 {
  font-weight: var(--fw-extrabold);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  color: var(--fg-brand);
}
h3, .h3 {
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  color: var(--fg-brand);
}
h4, .h4 {
  font-weight: var(--fw-bold);
  font-size: var(--text-2xl);
  color: var(--fg-brand);
}

p, .body {
  font-weight: var(--fw-regular);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--fg1);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.mono, code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-mono);
}

.data {                /* big numeric readouts */
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  color: var(--fg-brand);
}

.disclaim {            /* "FOR RESEARCH USE ONLY" style */
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-disclaim);
  color: var(--fg2);
  line-height: var(--leading-disclaim);
  text-transform: uppercase;
}

.wordmark-clarion {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-wordmark);
  color: var(--fg-brand);
}
.wordmark-peptides {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  letter-spacing: var(--tracking-descriptor);
  color: var(--fg-accent);
}

/* Editorial serif — long-form research copy & pull quotes */
.editorial {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: 1.6;
  color: var(--fg1);
}
.pull-quote {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.35;
  color: var(--fg-brand);
  font-style: italic;
}