/* ============================================================================
   service·health — Colors & Type
   --------------------------------------------------------------------------
   Pulled from the rebranding Figma (Fractal-Glass), the PPTX master theme
   "servicehealth | V1", the brandbook (display = Everett by Weiss Type),
   and the supplied logo set.

   Brand stylization: the wordmark is always written "service·health" — lower-
   case, with a centered middle dot (U+00B7) joining service + health. Two
   contexts may relax this:
     - Legal entity:   "service health erx GmbH"
     - URL / handle:   "service-health.de"
   Never write "service.health" in headlines (it reads like a domain) and
   never write "Service Health" (title case is off-brand).
============================================================================ */

/* Display + body both fall back to Helvetica only. Until the licensed
   Everett-*.woff2 files are dropped into fonts/, headlines render in
   Helvetica — see README → "Font substitution flag". */


@font-face {
  font-family: "Helvetica Brand";
  src: url("fonts/Helvetica-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Brand";
  src: url("fonts/Helvetica-BoldOblique.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ----------------------------------------------------------------------------
   EVERETT — display face per brandbook
   ----------------------------------------------------------------------------
   Six weights / styles vendored. Loaded directly from fonts/. */
@font-face {
  font-family: "Everett";
  src: url("fonts/Everett-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Everett";
  src: url("fonts/Everett-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Everett";
  src: url("fonts/Everett-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Everett";
  src: url("fonts/Everett-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Everett";
  src: url("fonts/Everett-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Everett";
  src: url("fonts/Everett-BoldItalic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* When this CSS is included in a page that has loaded Geist via Google
   Fonts, the fallback chain below resolves naturally. Pages that do NOT
   need Geist can omit the @import and will fall back to system geometric
   grotesques (or, last resort, Helvetica). */

/* The shipped TTFs are only Helvetica Bold + Bold-Oblique. For Regular and
   Medium we fall back to the system Helvetica (every Mac/iOS has it) and
   then to a near match. If you need a webfont everywhere, swap in Helvetica
   Now or Inter — flagged in README. */
:root {
  /* Display headlines: Everett (brandbook) — falls back to Geist while
     licensed files are missing. See @font-face block above. */
  --font-display: "Everett", "Helvetica Brand", "Helvetica", sans-serif;
  --font-body: "Helvetica", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

/* ----------------------------------------------------------------------------
   COLOR — Brand
   ----------------------------------------------------------------------------
   The brand sits on three pigments. Deep Space anchors most surfaces;
   Electric Violet is the spotlight; Signal Yellow is the punctuation.
   Use them in roughly that proportion — 70 / 20 / 10.
---------------------------------------------------------------------------- */
:root {
  /* Primary pigments */
  --sh-deep-space:       #100030;  /* dark surfaces, headings on light bg */
  --sh-electric-violet:  #5F28EF;  /* primary accent, links, CTAs */
  --sh-signal-yellow:    #F7EA59;  /* highlight, accent fill, illustration */

  /* Secondary violet — used as gradient top-stop / hover state */
  --sh-violet-light:     #845CEF;

  /* Neutrals — from PPTX theme */
  --sh-ink:              #18181B;  /* body text on light surfaces */
  --sh-graphite:         #3B3B3B;  /* secondary text */
  --sh-silver:           #C7C7CC;  /* dividers, disabled */
  --sh-structure:        #F2F2F7;  /* soft background, card fill */
  --sh-white:            #FFFFFF;

  /* Glass tones — see fractal glass section */
  --sh-glass-tint:       rgba(255, 255, 255, 0.07);
  --sh-glass-shade:      rgba(59, 59, 59, 0.20);
}

/* ----------------------------------------------------------------------------
   COLOR — Semantic (light surface)
---------------------------------------------------------------------------- */
:root {
  --bg:           var(--sh-white);
  --bg-soft:      var(--sh-structure);
  --bg-inverse:   var(--sh-deep-space);

  --fg:           var(--sh-ink);
  --fg-muted:     var(--sh-graphite);
  --fg-soft:      var(--sh-silver);
  --fg-inverse:   var(--sh-white);

  --accent:       var(--sh-electric-violet);
  --accent-hover: var(--sh-violet-light);
  --accent-fg:    var(--sh-white);
  --highlight:    var(--sh-signal-yellow);

  --border:       color-mix(in srgb, var(--sh-deep-space) 12%, transparent);
  --border-strong: color-mix(in srgb, var(--sh-deep-space) 24%, transparent);

  --link:         var(--sh-electric-violet);
  --link-visited: var(--sh-deep-space);

  --success:      #1F8A5B;
  --warning:      #B07A12;  /* derived; brandbook does not specify */
  --danger:       #C0392B;  /* derived; brandbook does not specify */
}

/* Dark surface (Deep Space) variant — apply to any element with [data-surface="space"] */
[data-surface="space"] {
  --bg:           var(--sh-deep-space);
  --bg-soft:      color-mix(in srgb, var(--sh-deep-space) 80%, var(--sh-electric-violet));
  --fg:           var(--sh-white);
  --fg-muted:     color-mix(in srgb, var(--sh-white) 70%, transparent);
  --fg-soft:      color-mix(in srgb, var(--sh-white) 40%, transparent);
  --accent:       var(--sh-signal-yellow);   /* yellow pops harder on space */
  --accent-fg:    var(--sh-deep-space);
  --border:       color-mix(in srgb, var(--sh-white) 14%, transparent);
  --border-strong: color-mix(in srgb, var(--sh-white) 28%, transparent);
  --link:         var(--sh-signal-yellow);
  background: var(--bg);
  color: var(--fg);
}

/* ----------------------------------------------------------------------------
   TYPE — Scale
   ----------------------------------------------------------------------------
   The Folienmaster uses an extreme contrast between large display titles
   (~64-96pt on slides) and 10-12pt body. We mirror that with a generous
   display scale and a tight body scale.
---------------------------------------------------------------------------- */
:root {
  --fs-display-xl: clamp(56px, 7vw, 104px);  /* hero, slide title */
  --fs-display-l:  clamp(40px, 5vw, 72px);   /* section opener */
  --fs-display-m:  clamp(32px, 4vw, 56px);
  --fs-h1:         clamp(28px, 3vw, 44px);
  --fs-h2:         clamp(22px, 2.4vw, 32px);
  --fs-h3:         20px;
  --fs-h4:         17px;
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-micro:      12px;
  --fs-eyebrow:    11px;  /* "KAPITEL", "REFERENZEN:", "KONTAKT" — always uppercase, tracked */

  --lh-display: 1.04;
  --lh-heading: 1.12;
  --lh-body: 1.5;
  --lh-tight: 1.2;

  --tracking-eyebrow: 0.18em;
  --tracking-display: -0.01em;
  --tracking-body: 0;
}

/* ----------------------------------------------------------------------------
   TYPE — Semantic roles
---------------------------------------------------------------------------- */
.sh-display, h1.sh-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  text-wrap: balance;
}
.sh-h1, h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  text-wrap: balance;
}
.sh-h2, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--fg);
  text-wrap: balance;
}
.sh-h3, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--fg);
}
.sh-h4, h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  color: var(--fg);
}
.sh-body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  text-wrap: pretty;
}
.sh-lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--fg-muted);
}
.sh-small, small {
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--fg-muted);
}
.sh-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.sh-mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: 500;
}

/* ----------------------------------------------------------------------------
   SHAPE — Radii, shadows, spacing
---------------------------------------------------------------------------- */
:root {
  /* Radii — the brand leans clean. Pills for chips/CTAs, soft cards. */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadow system — subtle. The brand earns depth through glass/blur, not
     drop-shadows. Use these only for elevation hints (menus, popovers). */
  --shadow-1: 0 1px 2px rgba(16, 0, 48, 0.04), 0 1px 1px rgba(16, 0, 48, 0.04);
  --shadow-2: 0 4px 14px rgba(16, 0, 48, 0.08);
  --shadow-3: 0 18px 40px -12px rgba(16, 0, 48, 0.20);
  --shadow-glow-violet: 0 8px 40px -6px rgba(95, 40, 239, 0.45);
  --shadow-glow-yellow: 0 8px 40px -6px rgba(247, 234, 89, 0.55);

  /* Spacing — 4px base, with a tighter scale than typical Material because
     the master slides are very air-friendly. */
  --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;
}

/* ----------------------------------------------------------------------------
   THE FRACTAL GLASS PRIMITIVE
   ----------------------------------------------------------------------------
   The signature visual motif. A column of frosted, vertically-tiled glass
   panels sits over the lower-left of dark surfaces; circles (violet, yellow,
   white, gradient) live behind them. Reproduce via .sh-fractal-glass on a
   relatively-positioned dark container.
---------------------------------------------------------------------------- */
.sh-fractal-glass {
  position: absolute;
  inset: 0 auto 0 0;
  width: clamp(280px, 49.6%, 953px);  /* 953/1920 of full-bleed slide */
  display: flex;
  flex-direction: row;
  gap: -5px;
  pointer-events: none;
}
.sh-fractal-glass::before,
.sh-fractal-glass::after,
.sh-fractal-glass .sh-fractal-stripe {
  content: "";
  flex: 1;
  background: linear-gradient(
    rgba(255, 255, 255, 0) 0%,
    rgba(59, 59, 59, 0.20) 17%,
    rgba(255, 255, 255, 0) 100%
  );
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

/* A pre-built glass card (frosted, no fractal stripes) */
.sh-glass {
  background: linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.03)),
              linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07));
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--r-lg);
}

/* ----------------------------------------------------------------------------
   FORMATTING HELPERS
---------------------------------------------------------------------------- */
.sh-wordmark::before { content: "service·health"; }
.sh-middot::before  { content: "·"; }

.sh-link {
  color: var(--link);
  text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color .15s ease, color .15s ease;
}
.sh-link:hover { text-decoration-color: var(--link); }

/* Highlight a single phrase in signal yellow — used very sparingly */
.sh-marker {
  background: linear-gradient(180deg, transparent 60%, var(--sh-signal-yellow) 60%);
  padding: 0 .1em;
}

/* Reset margin on first/last heading inside cards */
.sh-card > :first-child { margin-top: 0; }
.sh-card > :last-child  { margin-bottom: 0; }