/* ============================================================
   SNAPI BIO — Colors & Type
   Modern, warm, scientific. Designed for preterm diagnostics
   and maternal microbiome care.
   ============================================================ */

/* IMPORTANT: @import must come before any other rules */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- Web fonts ---------- */
/* Display + Body: Inter (variable) — uploaded to /fonts.
   Declared under custom family name "SnapiSans" so the host font
   preflight does not intercept and substitute it. */
/* Mono: IBM Plex Mono via Google Fonts, aliased to "SnapiMono" */
@font-face {
  font-family: "SnapiSans";
  src: url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("/fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SnapiSans";
  src: url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("/fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ============ COLOR — RAW PALETTE ============ */

  /* Ink / neutrals — clinical depth, never pure black */
  --ink-1000: #0E1B2C;     /* deepest — primary brand ink (clinical navy) */
  --ink-900:  #1B2A3E;
  --ink-700:  #3A4A5F;
  --ink-500:  #6A7990;
  --ink-300:  #B5BDC9;
  --ink-200:  #D8DCE3;
  --ink-100:  #ECEEF2;

  /* Cream / paper — warm light backgrounds (the "petri" base) */
  --paper-50:  #FBF8F3;    /* page bg — warm off-white */
  --paper-100: #F5F0E6;    /* card bg subtle */
  --paper-200: #ECE5D5;    /* divider warm */

  /* Coral — primary warm accent. Maternal, vital, alive. */
  --coral-700: #C8533C;
  --coral-600: #E26A4D;    /* primary action */
  --coral-500: #F08066;
  --coral-300: #F6B5A2;
  --coral-100: #FBE3D9;

  /* Moss — secondary. Living matter, microbiome, growth. */
  --moss-700:  #3F5B3A;
  --moss-500:  #6B8A5C;
  --moss-300:  #B0C49E;
  --moss-100:  #E1EAD3;

  /* Lab / data — supporting hues for data viz only */
  --lab-violet: #6B5DB8;
  --lab-amber:  #D9A24A;
  --lab-teal:   #4A8B96;

  /* Semantic */
  --signal-success: #4F8A57;
  --signal-warn:    #D9A24A;
  --signal-danger:  #B8453A;
  --signal-info:    #4A8B96;

  /* ============ COLOR — SEMANTIC ============ */
  --bg:           var(--paper-50);
  --bg-elevated:  #FFFFFF;
  --bg-sunken:    var(--paper-100);
  --bg-inverse:   var(--ink-1000);

  --fg-1:  var(--ink-1000);    /* primary text */
  --fg-2:  var(--ink-700);     /* secondary text */
  --fg-3:  var(--ink-500);     /* tertiary / captions */
  --fg-on-dark: var(--paper-50);

  --border-subtle:  var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);

  --accent:        var(--coral-600);
  --accent-hover:  var(--coral-700);
  --accent-soft:   var(--coral-100);

  --secondary:       var(--moss-500);
  --secondary-soft:  var(--moss-100);

  /* ============ TYPE — FAMILIES ============ */
  /* SnapiSans = Inter (uploaded variable). SnapiMono = IBM Plex Mono.
     Custom family names prevent host substitution. */
  --font-display: "SnapiSans", -apple-system, "Helvetica Neue", system-ui, sans-serif;
  --font-body:    "SnapiSans", -apple-system, "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ============ TYPE — SCALE ============ */
  --fs-display: clamp(56px, 7vw, 96px);
  --fs-h1: 56px;
  --fs-h2: 40px;
  --fs-h3: 28px;
  --fs-h4: 20px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12px;
  --fs-eyebrow: 11px;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.55;
  --lh-loose: 1.7;

  /* ============ SPACING (4pt base) ============ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ============ RADII ============ */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;     /* default card */
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ============ SHADOWS — soft, ambient, never harsh ============ */
  --shadow-xs: 0 1px 2px rgba(14, 27, 44, 0.04);
  --shadow-sm: 0 2px 6px rgba(14, 27, 44, 0.06);
  --shadow-md: 0 8px 24px -8px rgba(14, 27, 44, 0.10);
  --shadow-lg: 0 24px 48px -16px rgba(14, 27, 44, 0.18);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);

  /* ============ MOTION ============ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* =============================================================
   SEMANTIC TYPE STYLES
   ============================================================= */

.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: 500;
}

.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.045em;
  font-weight: 200;
  color: var(--fg-1);
}

.t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.04em;
  font-weight: 300;
  color: var(--fg-1);
}

.t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.035em;
  font-weight: 300;
  color: var(--fg-1);
}

.t-h3 {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: -0.025em;
  font-weight: 400;
  color: var(--fg-1);
}

.t-h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  line-height: 1.35;
  font-weight: 500;
  color: var(--fg-1);
}

.t-body-lg {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.t-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.t-small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg-2);
}

.t-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--fg-3);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.t-mono-eyebrow { /* "SAMPLE 0042 · LOT B" style label */
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Element defaults so plain HTML looks right */
html { background: var(--bg); color: var(--fg-1); }
body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-1); margin: 0; -webkit-font-smoothing: antialiased; }
h1 { font: 300 var(--fs-h1)/var(--lh-tight) var(--font-display); letter-spacing: -0.04em; margin: 0 0 var(--space-5); }
h2 { font: 300 var(--fs-h2)/var(--lh-snug) var(--font-display); letter-spacing: -0.035em; margin: 0 0 var(--space-4); }
h3 { font: 400 var(--fs-h3)/var(--lh-snug) var(--font-body); letter-spacing: -0.025em; margin: 0 0 var(--space-3); }
h4 { font: 500 var(--fs-h4)/1.35 var(--font-body); margin: 0 0 var(--space-2); }
p  { margin: 0 0 var(--space-4); color: var(--fg-2); }
code, kbd, samp { font-family: var(--font-mono); }
hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-6) 0; }
::selection { background: var(--coral-100); color: var(--ink-1000); }