/* ============================================================
   Plenagen Bio — Design Tokens
   colors_and_type.css · v1.0
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  /* ---------- Color tokens (raw) ---------- */
  --navy:        #0D1B2A;  /* Plenagen Navy — primary, authority */
  --navy-2:      #142536;  /* Slightly lifted navy for inner surfaces */
  --navy-3:      #1B2E42;  /* Card-on-navy surface */
  --gold:        #B8924A;  /* Plenagen Gold — premium accent, CTAs */
  --gold-light:  #D4AA6A;  /* Hover, secondary gold, gradient stop */
  --gold-deep:   #8E6F35;  /* Pressed / outline-on-light */
  --teal:        #1A5C4E;  /* Bio Teal — science / nature, BIO wordmark on light */
  --teal-light:  #2E7E6C;  /* Hover state for teal CTAs */
  --pearl:       #F2EDE5;  /* Warm off-white — light backgrounds */
  --pearl-2:     #EAE3D6;  /* Slightly deeper pearl — section bands */
  --stone:       #8A8480;  /* Supporting neutral — body text, borders */
  --stone-light: #B8B3AE;  /* Disabled, secondary captions */
  --frost:       #FAFAF8;  /* Near-white — cards, secondary backgrounds */
  --line:        rgba(13, 27, 42, 0.10);     /* Hairline divider on light */
  --line-dark:   rgba(212, 170, 106, 0.18);  /* Hairline divider on dark */

  /* ---------- Semantic colors ---------- */
  --bg:          var(--pearl);
  --bg-elev:     var(--frost);
  --bg-inverse:  var(--navy);
  --fg-1:        var(--navy);     /* primary text on light */
  --fg-2:        var(--stone);    /* secondary text */
  --fg-3:        var(--stone-light);
  --fg-on-dark-1:#F2EDE5;
  --fg-on-dark-2:#C9C2B8;
  --accent:      var(--gold);
  --accent-hover:var(--gold-light);
  --accent-pressed: var(--gold-deep);
  --science:     var(--teal);
  --focus-ring:  rgba(184, 146, 74, 0.45);

  /* ---------- Typography families ---------- */
  --font-serif:  "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-sans:   "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:   ui-monospace, Menlo, Consolas, "Roboto Mono", monospace;

  /* ---------- Type scale (base 16) ---------- */
  --fs-display:  44px;   /* 32–48 */
  --fs-h1:       28px;
  --fs-h2:       20px;
  --fs-body:     15px;
  --fs-small:    13px;
  --fs-eyebrow:  11px;
  --fs-jobtitle: 13px;
  --fs-caption:  11px;

  --lh-tight:    1.15;
  --lh-snug:     1.3;
  --lh-normal:   1.55;
  --lh-loose:    1.7;

  --tracking-eyebrow:  0.16em;
  --tracking-jobtitle: 0.12em;
  --tracking-caps:     0.08em;

  /* ---------- Spacing scale (4px grid) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---------- Radius ---------- */
  --r-xs: 2px;     /* Hairline pills (eyebrow tags) */
  --r-sm: 4px;     /* Inputs, small chips */
  --r-md: 8px;     /* Cards, buttons */
  --r-lg: 14px;    /* Larger surfaces */
  --r-pill: 999px; /* Capsule */

  /* ---------- Elevation (restrained; brand favors flat + hairline) ---------- */
  --shadow-1: 0 1px 2px rgba(13,27,42,0.06);
  --shadow-2: 0 6px 18px -8px rgba(13,27,42,0.18), 0 1px 2px rgba(13,27,42,0.06);
  --shadow-3: 0 24px 48px -24px rgba(13,27,42,0.30);
  --shadow-gold: 0 12px 32px -16px rgba(184,146,74,0.55);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.16, 0.84, 0.24, 1);
  --dur-fast: 140ms;
  --dur-med: 240ms;
  --dur-slow: 420ms;
}

/* ============================================================
   Semantic element styles — opt in by adding `.pl` to a root
   ============================================================ */
.pl {
  color: var(--fg-1);
  background: var(--bg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.pl.on-dark { color: var(--fg-on-dark-1); background: var(--bg-inverse); }

.pl h1, .pl .h-display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  color: var(--fg-1);
}
.pl h2, .pl .h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.pl h3, .pl .h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.pl p, .pl .body { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-1); }
.pl .body-2 { font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--fg-2); }

.pl .eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--gold);
  font-weight: 500;
}
.pl .jobtitle {
  font-family: var(--font-sans);
  font-size: var(--fs-jobtitle);
  text-transform: uppercase;
  letter-spacing: var(--tracking-jobtitle);
  color: var(--gold);
}
.pl .caption { font-size: var(--fs-caption); color: var(--fg-2); }
.pl code, .pl .mono { font-family: var(--font-mono); font-size: 0.92em; }

.pl .rule-gold { height: 1px; background: var(--gold); border: 0; }
.pl .rule-hair { height: 1px; background: var(--line); border: 0; }