/* =========================================================================
   Novadesk Med — Foundations
   Colors, type, spacing, radii, shadow tokens.
   Single source of truth used by all UI kits, slides, prototypes.
   ========================================================================= */

/* --- Webfonts ------------------------------------------------------------- */
/* Brand fonts:
   - Ibrand (display, primary brand typeface) — local TTF supplied by brand.
   - Poppins (body) — local TTFs supplied by brand.
   - Bricolage Grotesque (legacy display fallback) — kept from Google Fonts
     for backward compatibility with older slides. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&display=swap');

@font-face {
  font-family: 'Ibrand';
  font-weight: 100 900;
  font-style: normal;
  src: url('fonts/Ibrand.ttf') format('truetype');
  font-display: swap;
  /* NOTE: Ibrand ships a broken 'ü'/'Ü' glyph (renders as a detached
     diaeresis). We deliberately exclude U+00DC (Ü) and U+00FC (ü) from this
     face's coverage so the browser falls through to the next font in the
     --font-display stack (Bricolage Grotesque, loaded via @import above) for
     just those two German letters. Everything else uses Ibrand. */
  unicode-range: U+0-DB, U+DD-FB, U+FD-10FFFF;
}

@font-face {
  font-family: 'Poppins';
  font-weight: 100;
  font-style: normal;
  src: url('fonts/Poppins-Thin.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 100;
  font-style: italic;
  src: url('fonts/Poppins-ThinItalic.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 200;
  font-style: normal;
  src: url('fonts/Poppins-ExtraLight.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 200;
  font-style: italic;
  src: url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 300;
  font-style: normal;
  src: url('fonts/Poppins-Light.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 300;
  font-style: italic;
  src: url('fonts/Poppins-LightItalic.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  font-style: normal;
  src: url('fonts/Poppins-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  font-style: italic;
  src: url('fonts/Poppins-Italic.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 500;
  font-style: normal;
  src: url('fonts/Poppins-Medium.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 500;
  font-style: italic;
  src: url('fonts/Poppins-MediumItalic.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 600;
  font-style: normal;
  src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 600;
  font-style: italic;
  src: url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 700;
  font-style: normal;
  src: url('fonts/Poppins-Bold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 700;
  font-style: italic;
  src: url('fonts/Poppins-BoldItalic.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 800;
  font-style: normal;
  src: url('fonts/Poppins-ExtraBold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 800;
  font-style: italic;
  src: url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 900;
  font-style: normal;
  src: url('fonts/Poppins-Black.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 900;
  font-style: italic;
  src: url('fonts/Poppins-BlackItalic.ttf') format('truetype');
  font-display: swap;
}

:root {
  /* ----- Brand color ------------------------------------------------------ */
  /* The single brand green. From PPTX (#1FA26B) and logo SVG (#00A26C).
     We use #00A26C because it matches the official logo file exactly. */
  --brand-green: #00a26c;
  --brand-green-700: #008255; /* hover / pressed primary */
  --brand-green-800: #006b47; /* deepest brand step */
  --brand-green-300: #66c7a4; /* secondary surface */
  --brand-green-200: #a8dec7; /* light surface, illustration mid */
  --brand-green-100: #d6efe3; /* tint for callouts and pills */
  --brand-green-50: #ecf8f2; /* lightest tint, table row hover, etc */

  /* ----- Neutrals (text, surfaces, borders) ----------------------------- */
  --ink-1000: #000000; /* logos, hero headlines (B&W slides) */
  --ink-900: #0e1311; /* body text, headings on white */
  --ink-700: #2a332f; /* secondary text */
  --ink-500: #5c6b65; /* tertiary text, captions */
  --ink-400: #8a9690; /* placeholder, disabled-ish */
  --ink-300: #c2ccc7; /* hairline borders on dark photos */
  --ink-200: #e2e7e5; /* divider, card border */
  --ink-100: #f1f3f2; /* subtle background */
  --ink-50: #f7f9f8; /* page background tint */
  --paper: #ffffff; /* base surface */

  /* ----- Semantic ------------------------------------------------------- */
  --color-bg: var(--paper);
  --color-bg-muted: var(--ink-50);
  --color-fg: var(--ink-900);
  --color-fg-muted: var(--ink-500);
  --color-fg-onbrand: var(--paper);
  --color-border: var(--ink-200);
  --color-border-strong: var(--ink-300);

  --color-primary: var(--brand-green);
  --color-primary-hover: var(--brand-green-700);
  --color-primary-press: var(--brand-green-800);
  --color-on-primary: var(--paper);

  --color-success: var(--brand-green); /* same as brand */
  --color-warning: #d97706;
  --color-danger: #b42318;
  --color-info: #0f6fb8;

  /* ----- Typography ----------------------------------------------------- */
  --font-display:
    'Ibrand', 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display-legacy:
    'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Type scale — display uses Bricolage, body uses Poppins.
     Sizes are ratio ~1.20-1.25 (major-third / perfect-fourth blend). */
  --fs-display-xl: clamp(56px, 6.4vw, 96px); /* hero title */
  --fs-display-l: clamp(44px, 4.8vw, 72px); /* slide title */
  --fs-display-m: clamp(36px, 3.6vw, 56px); /* section header */
  --fs-display-s: clamp(28px, 2.6vw, 40px); /* big stat label */

  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-h5: 18px;

  --fs-body-l: 18px;
  --fs-body: 16px;
  --fs-body-s: 14px;
  --fs-caption: 12px;
  --fs-eyebrow: 12px; /* uppercase eyebrow label */

  --lh-tight: 1.05; /* display */
  --lh-snug: 1.15; /* big headings */
  --lh-normal: 1.45; /* body */
  --lh-loose: 1.6; /* long-form copy */

  --tracking-tight: -0.02em; /* display headlines */
  --tracking-normal: 0;
  --tracking-eyebrow: 0.14em; /* uppercase eyebrows on website */

  /* ----- Spacing scale (4px base) -------------------------------------- */
  --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;

  /* ----- Radii ---------------------------------------------------------- */
  /* The brand uses BIG, soft, droplet-style rounding on photo cards
     (top-corners ~16-24px, bottom often equally rounded), but asymmetric
     'arch' shapes on background art. Buttons & pills are fully rounded. */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 40px;
  --radius-pill: 999px;
  --radius-arch-t: 50% 50% 8px 8px / 80px 80px 8px 8px; /* top-arched droplet */

  /* ----- Shadow / elevation -------------------------------------------- */
  /* Restrained shadows. The brand prefers flat surfaces with thin borders;
     elevation only for floating UI (dropdowns, tooltips, modals). */
  --shadow-xs: 0 1px 2px rgba(14, 19, 17, 0.04);
  --shadow-sm: 0 2px 6px rgba(14, 19, 17, 0.06);
  --shadow-md: 0 8px 24px rgba(14, 19, 17, 0.08);
  --shadow-lg: 0 16px 48px rgba(14, 19, 17, 0.12);
  --shadow-brand: 0 12px 32px rgba(0, 162, 108, 0.18);

  /* ----- Motion --------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 400ms;
}

/* --- Base resets / global type ------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  /* Offset anchor-scroll targets so they clear the sticky nav. */
  scroll-padding-top: 84px;
  scroll-behavior: smooth;
  /* Match the footer so the iOS overscroll / safe-area below the footer shows
     the brand-dark green, not a white strip behind the browser toolbar. */
  background: var(--brand-dark);
}
html,
body {
  margin: 0;
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  background: var(--color-bg);
}
/* Clip horizontal overflow on the BODY only (never html — that turns the root
   into a scroll container and adds a phantom side gutter + breaks sticky). */
body {
  overflow-x: clip;
  width: 100%;
}
img,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* --- Semantic typographic primitives ------------------------------------- */
.nm-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.nm-display-xl,
.nm-display-l,
.nm-display-m,
.nm-display-s {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
}
.nm-display-xl {
  font-size: var(--fs-display-xl);
}
.nm-display-l {
  font-size: var(--fs-display-l);
}
.nm-display-m {
  font-size: var(--fs-display-m);
  line-height: var(--lh-snug);
}
.nm-display-s {
  font-size: var(--fs-display-s);
  line-height: var(--lh-snug);
}

.nm-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
.nm-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
.nm-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}
.nm-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}
.nm-h5 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
}

.nm-body-l {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: var(--lh-loose);
}
.nm-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}
.nm-body-s {
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  line-height: var(--lh-normal);
  color: var(--color-fg-muted);
}
.nm-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--color-fg-muted);
}

/* When italics are needed in display copy, fall back to body italic
   (Bricolage Grotesque has no italic style). */
.nm-italic-display {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 500;
}

/* =========================================================================
   Per-vertical brand theming (novadesk multi-vertical hub).
   The whole token system above stays the canonical source of truth.
   Here we introduce a single `--brand` indirection and override it per
   active vertical via the `data-vertical` attribute set SSR-side on <html>.
   Adding a new vertical = add one block here + one config in the registry.
   ========================================================================= */
:root {
  --brand: var(--brand-green);
  --brand-hover: var(--brand-green-700);
  --brand-press: var(--brand-green-800);
  --brand-50: var(--brand-green-50);
  --brand-100: var(--brand-green-100);
  --brand-200: var(--brand-green-200);
  --brand-300: var(--brand-green-300);
  /* deep tone for dark sections (footer, "warum"); mid for the lighter wave
     in the organic flowing shapes. */
  --brand-dark: #0e3b28;
  --brand-mid: #3aa775;
}

/* med — Swiss healthcare green (canonical brand color, matches logo) */
[data-vertical='med'] {
  --brand: #00a26c;
  --brand-hover: #008255;
  --brand-press: #006b47;
  --brand-50: #ecf8f2;
  --brand-100: #d6efe3;
  --brand-200: #a8dec7;
  --brand-300: #66c7a4;
  --brand-dark: #0e3b28;
  --brand-mid: #3aa775;
}

/* care — Alters-/Pflegeheime. Brand glyph = heart, brand color = blue. */
[data-vertical='care'] {
  --brand: #1f6feb;
  --brand-hover: #1857c2;
  --brand-press: #14489c;
  --brand-50: #eef4fe;
  --brand-100: #d7e6fc;
  --brand-200: #aecbf8;
  --brand-300: #7da9f2;
  --brand-dark: #0c2747;
  --brand-mid: #5891f0;
}

/* hub — umbrella brand keeps green as the family accent */
[data-vertical='hub'] {
  --brand: #00a26c;
  --brand-hover: #008255;
  --brand-press: #006b47;
  --brand-50: #ecf8f2;
  --brand-100: #d6efe3;
  --brand-200: #a8dec7;
  --brand-300: #66c7a4;
  --brand-dark: #0e3b28;
  --brand-mid: #3aa775;
}

/* Re-point the semantic primary tokens everything already consumes onto the
   active vertical's brand. Defined AFTER the original :root so it wins. */
:root {
  --color-primary: var(--brand);
  --color-primary-hover: var(--brand-hover);
  --color-primary-press: var(--brand-press);
}

/* --- Reveal-on-scroll (see $lib/actions/reveal.ts) ----------------------- */
/* Classes are added by JS only, so without JS content stays visible. */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.65s var(--ease-emphasis),
    transform 0.65s var(--ease-emphasis);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}