/* ============================================================
   SACH CHEMISTS DESIGN TOKENS - V1.1 - SEPTEMBER 2026
   assets/css/tokens.css - loaded first, before every other stylesheet
   ============================================================ */
:root {
  /* Primary */
  --sc-green: #0A5C2F;
  --sc-green-bright: #12923F;
  --sc-green-deep: #063D1F;
  /* Surfaces */
  --sc-paper: #FBFBF9;
  --sc-white: #FFFFFF;
  --sc-mint: #E9F5EE;
  --sc-mint-deep: #D3EADB;
  --sc-stone: #F2F3F0;
  /* Text and lines */
  --sc-ink: #182019;
  --sc-body: #4A5650;
  --sc-muted: #7A857F;
  --sc-line: #DCE5DF;
  --sc-line-strong: #B9C9BF;
  /* Reserved and states */
  --sc-nhs: #005EB8;
  --sc-amber: #B85C00;
  --sc-amber-bg: #FFF4E5;
  --sc-error: #B42318;
  --sc-error-bg: #FEF3F2;
  /* Typography */
  --sc-font-display: 'Fraunces', Georgia, serif;
  --sc-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --sc-text-display: clamp(44px, 5.5vw, 68px);
  --sc-text-h1: clamp(36px, 4.2vw, 52px);
  --sc-text-h2: clamp(30px, 3.2vw, 38px);
  --sc-text-h3: clamp(24px, 2.2vw, 26px);
  --sc-text-h4: clamp(18px, 1.6vw, 20px);
  --sc-text-body-l: clamp(18px, 1.5vw, 20px);
  --sc-text-body: clamp(17px, 1.3vw, 18px);
  --sc-text-body-s: 16px;
  --sc-text-caption: 14px;
  --sc-text-button: 17px;
  --sc-leading-display: 1.02;
  --sc-leading-heading: 1.12;
  --sc-leading-body: 1.65;
  --sc-measure: 64ch;
  /* Spacing, 4px base */
  --sc-s-1: 4px;  --sc-s-2: 8px;  --sc-s-3: 12px; --sc-s-4: 16px;
  --sc-s-5: 20px; --sc-s-6: 24px; --sc-s-8: 32px; --sc-s-10: 40px;
  --sc-s-12: 48px; --sc-s-16: 64px; --sc-s-20: 80px; --sc-s-24: 96px; --sc-s-30: 120px;
  --sc-container: 1200px;
  --sc-narrow: 640px;
  --sc-gutter: 20px;
  /* Radius */
  --sc-r-sm: 8px; --sc-r-md: 12px; --sc-r-lg: 20px; --sc-r-xl: 28px; --sc-r-pill: 999px;
  /* Shadow */
  --sc-shadow-card: 0 1px 2px rgba(24,32,25,.04), 0 8px 24px rgba(24,32,25,.06);
  --sc-shadow-lift: 0 2px 4px rgba(24,32,25,.05), 0 16px 40px rgba(10,92,47,.14);
  /* Motion */
  --sc-ease: cubic-bezier(.22, 1, .36, 1);
  --sc-fast: 180ms; --sc-med: 360ms; --sc-slow: 700ms;
  /* Interaction */
  --sc-tap: 52px;
  --sc-focus: 0 0 0 3px #FBFBF9, 0 0 0 6px #12923F;
}
@media (max-width: 767px) { :root { --sc-gutter: 20px; --sc-section: 48px; } }
@media (min-width: 768px) { :root { --sc-gutter: 40px; --sc-section: 96px; } }
@media (min-width: 1440px) { :root { --sc-gutter: 80px; } }