/* SwissMedX — Farben & Typografie
   Aligned to Brand Guidelines v1.0. */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ─── Medical Red · RETIRED ───────────────────────────────
     Per Brand Guide v1.0, red survives only inside the logo
     monogram (the Swiss-cross X). Never use on surfaces. ─── */
  --smx-red:        #B31B1B;  /* logo monogram only */
  --smx-red-deep:   #8A1212;
  --smx-red-bright: #D12626;
  --smx-red-blush:  #F5D9D9;

  /* ─── Forest Deep · primary accent (replaces red) ─────── */
  --smx-forest:      #1F3D2E;  /* CTAs, strokes, structural accents */
  --smx-forest-deep: #163026;  /* hover / pressed */
  --smx-forest-mist: #E8EFEA;

  /* ─── Brushed Gold · the schmuck (rare luxury marker) ─── */
  --smx-gold:        #A88B5A;  /* italic emphasis, numerals, hairlines */
  --smx-gold-soft:   #C9B388;  /* gold on dark surfaces */
  --smx-champagne:   #F5EFE3;  /* the one featured card */

  /* ─── Midnight Navy · trust + governance ──────────────── */
  --smx-navy:        #1E2A3A;
  --smx-navy-mist:   #E8ECF1;

  /* ─── Neutrals ────────────────────────────────────────── */
  --smx-ink-black: #0A0A0A;  /* statement surfaces (cover/closing) */
  --smx-ink:       #1A1D1F;  /* primary ink · body, titles */
  --smx-ink-soft:  #2A2E33;
  --smx-graphite:  #4A4F56;
  --smx-stone-700: #6B6F75;
  --smx-stone-500: #9CA0A6;
  --smx-stone-300: #D4D2CC;
  --smx-stone-200: #E6E3DC;
  --smx-stone-100: #F1EEE7;
  --smx-linen:     #F1ECE3;  /* soft section breaks */
  --smx-paper:     #FFFFFF;  /* lifted plane · cards, hovers */
  --smx-bone:      #FAF8F4;  /* default page surface */
  --smx-white:     #FFFFFF;

  /* ─── Secondary accents · sparsam ─────────────────────── */
  --smx-clinical:       #4E7A8C;  /* kühl, diagnostisch */
  --smx-clinical-light: #B8CAD1;  /* Hintergrund-Wash */
  --smx-sage:           #8A9A83;  /* natürlich, Wellness */

  /* ─── Text on light ───────────────────────────────────── */
  --smx-text:     #14171A;
  --smx-text-2:   #4A4F56;
  --smx-text-3:   #6B6F75;
  --smx-text-mut: #9CA0A6;
  --smx-text-inv: #FAF8F3;

  /* ─── Hairlines ───────────────────────────────────────── */
  --smx-rule:   #E6E3DC;
  --smx-rule-2: #F1EEE7;

  /* ─── Type families ───────────────────────────────────── */
  --smx-font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --smx-font-sans:  "Manrope", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --smx-font-mono:  "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* ─── Type scale ──────────────────────────────────────── */
  --smx-size-display: 72px;    /* clamp 72–104 at use site */
  --smx-size-h1:      48px;
  --smx-size-h2:      32px;
  --smx-size-lead:    24px;    /* 22–32 */
  --smx-size-body:    16px;
  --smx-size-caps:    12px;
  --smx-size-mono:    12px;

  --smx-lh-display: 0.98;
  --smx-lh-h1:      1.05;
  --smx-lh-h2:      1.15;
  --smx-lh-lead:    1.35;
  --smx-lh-body:    1.6;
  --smx-lh-caps:    1.4;
  --smx-lh-mono:    1.5;

  --smx-track-display: -0.02em;
  --smx-track-h1:      -0.015em;
  --smx-track-h2:      -0.01em;
  --smx-track-caps:     0.12em;
  --smx-track-mono:     0.04em;

  --smx-measure: 68ch;
}

/* ─── Page baseline ─────────────────────────────────────── */
.smx-page {
  background: var(--smx-bone);
  color: var(--smx-text);
  font: 400 var(--smx-size-body)/var(--smx-lh-body) var(--smx-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Editorial serif ───────────────────────────────────── */
.smx-display, .smx-h1, .smx-h2 {
  font-family: var(--smx-font-serif);
  font-weight: 400;
  color: var(--smx-ink);
  text-wrap: balance;
}
.smx-display { font-size: clamp(72px, 9vw, 104px); line-height: var(--smx-lh-display); letter-spacing: var(--smx-track-display); }
.smx-h1      { font-size: var(--smx-size-h1); line-height: var(--smx-lh-h1); letter-spacing: var(--smx-track-h1); }
.smx-h2      { font-size: var(--smx-size-h2); line-height: var(--smx-lh-h2); letter-spacing: var(--smx-track-h2); }

/* Lead / pull — italic serif. */
.smx-lead {
  font: italic 400 var(--smx-size-lead)/var(--smx-lh-lead) var(--smx-font-serif);
  color: var(--smx-ink-soft);
}

/* The ownable italic emphasis — forest on light, gold for hero/display. */
.smx-em-red {
  color: var(--smx-forest);
  font-style: italic;
  font-family: var(--smx-font-serif);
  font-weight: 500;
}

/* ─── Sans · body, caps ─────────────────────────────────── */
.smx-p {
  font: 400 var(--smx-size-body)/var(--smx-lh-body) var(--smx-font-sans);
  color: var(--smx-graphite);
  max-width: var(--smx-measure);
  text-wrap: pretty;
}
.smx-caps {
  font: 500 var(--smx-size-caps)/var(--smx-lh-caps) var(--smx-font-sans);
  letter-spacing: var(--smx-track-caps);
  text-transform: uppercase;
  color: var(--smx-ink);
}

/* ─── Mono · data ──────────────────────────────────────── */
.smx-mono {
  font: 400 var(--smx-size-mono)/var(--smx-lh-mono) var(--smx-font-mono);
  letter-spacing: var(--smx-track-mono);
  font-feature-settings: "tnum", "zero";
}

/* Eyebrow — gold mono caps used as section labels. */
.smx-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 400 11px/1 var(--smx-font-mono);
  letter-spacing: var(--smx-track-caps);
  text-transform: uppercase;
  color: var(--smx-gold);
}
.smx-eyebrow::before {
  content: ''; width: 24px; height: 1px; background: var(--smx-gold);
}