/* =============================================================
   AURELIA SARAMAK — DESIGN SYSTEM
   colors_and_type.css
   Clinical precision · microscope light · technical calm
   -------------------------------------------------------------
   Fonts are loaded from Google Fonts (see @import below).
   Triad:
     Display  — Space Grotesk  (geometric, technical, tight)
     Body     — IBM Plex Sans  (humanist, highly readable)
     Mono     — IBM Plex Mono  (numbers, labels, "precision" detail)
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- BRAND PALETTE ---------- */
  /* Deep teal / petrol — the structural base */
  --petrol-900: #092C2C;   /* darkest — CTA & footer fields */
  --petrol-800: #0E3A3A;   /* primary deep teal */
  --petrol-700: #14524E;   /* secondary teal */
  --petrol-600: #1C6660;   /* hover / lighter teal */

  /* Navy support — pairs with petrol for depth */
  --navy-900:   #0B1F2A;
  --navy-800:   #12303D;

  /* Mint–cyan accent — "the microscope light" */
  --mint-500:   #3FBFA8;   /* primary accent */
  --mint-400:   #5FD3BE;   /* hover light */
  --mint-300:   #A7E8DA;   /* tint / fills */
  --mint-100:   #E2F6F1;   /* faint wash */

  /* Neutrals — clean lab surfaces */
  --white:      #FFFFFF;
  --paper:      #F4F7F6;   /* light gray section background */
  --paper-2:    #EAF0EE;   /* slightly deeper panel */
  --line:       #D7E0DD;   /* hairline borders on light */
  --line-dark:  rgba(255,255,255,0.14); /* hairline on dark */

  /* Text — graphite */
  --graphite:   #1B2422;   /* primary text */
  --graphite-2: #46524F;   /* secondary text */
  --graphite-3: #6E7A77;   /* muted / captions */

  /* ---------- SEMANTIC ROLES ---------- */
  --bg:          var(--white);
  --bg-muted:    var(--paper);
  --bg-deep:     var(--petrol-800);
  --bg-deepest:  var(--petrol-900);

  --fg:          var(--graphite);
  --fg-2:        var(--graphite-2);
  --fg-3:        var(--graphite-3);
  --fg-on-dark:  #EAF3F0;
  --fg-on-dark-2:rgba(234,243,240,0.66);

  --accent:      var(--mint-500);
  --accent-hover:var(--mint-400);
  --accent-text: var(--petrol-900); /* text sitting on mint */

  --border:      var(--line);
  --border-dark: var(--line-dark);

  --focus-ring:  0 0 0 3px rgba(63,191,168,0.45);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* ---------- TYPE SCALE (rem @16 base) ---------- */
  --fs-display:  clamp(3rem, 6vw, 5.25rem);  /* hero */
  --fs-h1:       clamp(2.25rem, 4vw, 3.5rem);
  --fs-h2:       clamp(1.75rem, 2.6vw, 2.5rem);
  --fs-h3:       1.5rem;
  --fs-h4:       1.1875rem;
  --fs-lead:     1.25rem;   /* intro paragraphs */
  --fs-body:     1.0625rem;
  --fs-small:    0.9375rem;
  --fs-label:    0.75rem;   /* mono eyebrows */

  --lh-tight:    1.04;
  --lh-snug:     1.18;
  --lh-body:     1.62;

  --tracking-label: 0.18em; /* eyebrow / mono caps */
  --tracking-tight: -0.02em;

  /* ---------- SPACING (8px base grid) ---------- */
  --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;
  --section-y: clamp(64px, 9vw, 128px);
  --gutter:    clamp(20px, 5vw, 64px);
  --maxw:      1200px;

  /* ---------- RADII ---------- */
  --r-none: 0px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-pill: 999px;

  /* ---------- ELEVATION ---------- */
  /* Restrained, cool-toned. Precision brands stay flat-ish. */
  --shadow-sm:  0 1px 2px rgba(11,31,42,0.06);
  --shadow-md:  0 6px 20px -8px rgba(11,31,42,0.18);
  --shadow-lg:  0 24px 60px -24px rgba(11,31,42,0.30);
  --shadow-accent: 0 10px 30px -12px rgba(63,191,168,0.55);

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

/* =============================================================
   SEMANTIC ELEMENT STYLES — opt-in via .ds-prose / classes
   ============================================================= */

.ds-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

.ds-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h1, .ds-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h2, .ds-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h3, .ds-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg);
}

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

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

.ds-mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}

.ds-stat {
  font-family: var(--font-display);
  font-weight: 600;
  font-feature-settings: "tnum" 1;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}