/* =========================================================
   Bluepoint Water Testing — Design Tokens
   Coastal-clinical palette. Friendly-expert voice.
   ========================================================= */

/* ---------- Typography: webfonts ---------- */
/* Serif display: Fraunces is overused — using "Newsreader" for editorial-credibility headlines.
   Body: Inter Tight (pragmatic, tight, technical but warm).
   Mono: JetBrains Mono for data/lab values. */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* =====================================================
     COLOR — Coastal Clinical
     ===================================================== */

  /* Brand primaries — "Bluepoint" blue derived from a drop-of-water at noon */
  --bp-ink:       #0B2A3D; /* deepest — headlines, text on light */
  --bp-deep:     #0E3A55;  /* deep navy — anchors, buttons */
  --bp-blue:     #1E6FA8;  /* the signature blue — primary accent */
  --bp-aqua:     #2FA4B8;  /* bright aqua — highlights, links */
  --bp-surf:     #7AD3D9;  /* coastal surf — badges, chips */
  --bp-mist:     #CDEAEC;  /* misty aqua — tints, chart fills */
  --bp-foam:     #EAF6F7;  /* pale foam — page tints */

  /* Neutrals — warm-cool to keep the "Florida light" feel */
  --bp-paper:    #FBFAF6;  /* off-white page (slight warmth) */
  --bp-shell:    #F3F1EA;  /* card tint / secondary page */
  --bp-sand:     #E6E2D6;  /* subtle divider / field tint */
  --bp-stone:    #B8B4A7;  /* muted neutral text */
  --bp-graphite: #4B5560;  /* body secondary */
  --bp-char:     #1C2530;  /* near-black, softer than pure */

  /* Semantic — calibrated to feel clinical, not alarming */
  --bp-ok:       #2E8B6B;  /* safe / within-limit results */
  --bp-ok-tint:  #DCEEE5;
  --bp-warn:     #C98A1F;  /* elevated / watch */
  --bp-warn-tint:#F6E8CC;
  --bp-alert:    #B14A3C;  /* exceeds EPA limit — never pure red */
  --bp-alert-tint:#F3DAD3;
  --bp-info:     #1E6FA8;  /* links, notes */
  --bp-info-tint:#D6E8F2;

  /* Foreground / Background semantic tokens */
  --fg-1: var(--bp-ink);        /* primary text */
  --fg-2: var(--bp-graphite);   /* secondary text */
  --fg-3: var(--bp-stone);      /* tertiary / meta */
  --fg-inv: var(--bp-paper);    /* text on dark */
  --fg-link: var(--bp-blue);

  --bg-1: var(--bp-paper);      /* page */
  --bg-2: var(--bp-shell);      /* secondary surface */
  --bg-3: var(--bp-foam);       /* tinted coastal panel */
  --bg-inv: var(--bp-ink);      /* dark panel */
  --bg-brand: var(--bp-deep);   /* brand anchor */

  --border-1: #E4E0D4;          /* default divider (warm) */
  --border-2: #D1CEC1;          /* stronger */
  --border-focus: var(--bp-aqua);

  /* =====================================================
     TYPE — Newsreader (serif display) + Inter Tight + JetBrains Mono
     ===================================================== */
  --font-serif:  "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans:   "Inter Tight", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono:   "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — modest, editorial.
     Line-heights (--lh-*) are unitless and letter-spacings (--ls-*) are em-based,
     so they're tagged @kind font (type metrics) for the token classifier. */
  --fs-display: 72px;
  --lh-display: 1.02;    /* @kind font */
  --ls-display: -0.02em; /* @kind font */
  --fs-h1:      48px;
  --lh-h1:      1.08;    /* @kind font */
  --ls-h1:     -0.015em; /* @kind font */
  --fs-h2:      34px;
  --lh-h2:      1.15;    /* @kind font */
  --ls-h2:     -0.01em;  /* @kind font */
  --fs-h3:      24px;
  --lh-h3:      1.25;    /* @kind font */
  --ls-h3:     -0.005em; /* @kind font */
  --fs-h4:      18px;
  --lh-h4:      1.35;    /* @kind font */
  --ls-h4:      0;        /* @kind font */
  --fs-body:    16px;
  --lh-body:    1.55;    /* @kind font */
  --fs-small:   14px;
  --lh-small:   1.5;     /* @kind font */
  --fs-micro:   12px;
  --lh-micro:   1.4;     /* @kind font */
  --fs-data:    14px;
  --lh-data:    1.4;     /* @kind font */
  --fs-eyebrow: 12px;
  --lh-eyebrow: 1.2;     /* @kind font */
  --ls-eyebrow: 0.14em;  /* @kind font */

  /* =====================================================
     SPACING — 4pt baseline
     ===================================================== */
  --s-0:  0; /* @kind spacing */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* =====================================================
     RADII — restrained. Cards soft, pills fully round.
     ===================================================== */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* =====================================================
     ELEVATION — subtle, cool-blue tinted shadows
     ===================================================== */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(14,58,85,0.04), 0 1px 2px rgba(14,58,85,0.06);
  --shadow-2: 0 1px 2px rgba(14,58,85,0.06), 0 4px 12px rgba(14,58,85,0.08);
  --shadow-3: 0 2px 4px rgba(14,58,85,0.06), 0 12px 28px rgba(14,58,85,0.10);
  --shadow-4: 0 8px 24px rgba(14,58,85,0.10), 0 24px 56px rgba(14,58,85,0.14);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(14,58,85,0.04);

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

/* =========================================================
   Semantic element styles — drop-in defaults
   ========================================================= */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display, h1.display {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  text-wrap: balance;
}
h1, .h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
}
p { text-wrap: pretty; }
.small { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-2); }
.micro { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--fg-3); }
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bp-blue);
}
.data, code, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-data);
  line-height: var(--lh-data);
}
a { color: var(--fg-link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--bp-aqua); }

/* Reusable tokens for components */
.bp-card {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}