/**
 * Ventomedica Design System v1 — foundation
 * Plugin build: 0.1.29
 *
 * IMPORTANT: This first release is intentionally neutral.
 * - The :root block only introduces new semantic token names.
 * - Shared component contracts are scoped to .vm-ds-v1, a class that is not
 *   present on current production/staging page families yet.
 * - Existing page CSS therefore continues to own rendering until each family
 *   is migrated and verified independently.
 */

:root {
  /* Brand / surfaces */
  --vm-ds-navy-900: #071d3a;
  --vm-ds-navy-800: #082a46;
  --vm-ds-navy-700: #0b3c5d;
  --vm-ds-primary-700: #02628a;
  --vm-ds-primary-600: #0272a0;
  /* Accent-only: do not use as a background behind small white text. */
  --vm-ds-brand-blue: #0798d1;
  --vm-ds-cyan: #35b8e6;
  --vm-ds-sky: #eaf7fc;
  --vm-ds-surface: #ffffff;
  --vm-ds-text: #071d2e;
  --vm-ds-muted: #536778;
  --vm-ds-border: #dbe8ef;

  /* Typography */
  --vm-ds-font-sans: Inter, Arial, Helvetica, sans-serif;
  --vm-ds-leading-body: 1.55;
  --vm-ds-leading-display: 0.98;
  --vm-ds-leading-heading: 1.06;
  --vm-ds-tracking-display: -0.05em;
  --vm-ds-tracking-heading: -0.035em;

  /* Spacing */
  --vm-ds-space-1: 8px;
  --vm-ds-space-2: 12px;
  --vm-ds-space-3: 16px;
  --vm-ds-space-4: 24px;
  --vm-ds-space-5: 32px;
  --vm-ds-space-6: 48px;
  --vm-ds-space-7: 64px;
  --vm-ds-space-8: 96px;

  /* Radius */
  --vm-ds-radius-sm: 12px;
  --vm-ds-radius-md: 18px;
  --vm-ds-radius-lg: 24px;
  --vm-ds-radius-xl: 28px;
  --vm-ds-radius-pill: 999px;

  /* Elevation */
  --vm-ds-shadow-subtle: 0 10px 30px rgba(8, 42, 70, 0.06);
  --vm-ds-shadow-card: 0 12px 34px rgba(8, 42, 70, 0.07);
  --vm-ds-shadow-elevated: 0 22px 60px rgba(8, 42, 70, 0.13);

  /* Layout */
  --vm-ds-shell: 1180px;
  --vm-ds-breakpoint-sm: 640px;
  --vm-ds-breakpoint-md: 900px;
  --vm-ds-breakpoint-lg: 1200px;
}

/*
 * Opt-in shared contracts. These do not match any current page unless a future
 * migration explicitly adds .vm-ds-v1 to its root wrapper.
 */
.vm-ds-v1,
.vm-ds-v1 * {
  box-sizing: border-box;
}

.vm-ds-v1 {
  color: var(--vm-ds-text);
  background: var(--vm-ds-surface);
  font-family: var(--vm-ds-font-sans);
  line-height: var(--vm-ds-leading-body);
}

.vm-ds-v1 .vm-ds-shell {
  width: min(var(--vm-ds-shell), calc(100% - 40px));
  margin-inline: auto;
}

.vm-ds-v1 .vm-ds-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--vm-ds-radius-pill);
  background: linear-gradient(135deg, var(--vm-ds-primary-700), var(--vm-ds-primary-600));
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.vm-ds-v1 .vm-ds-button:hover,
.vm-ds-v1 .vm-ds-button:focus-visible {
  background: linear-gradient(135deg, #014f70, var(--vm-ds-primary-700));
  transform: translateY(-2px);
}

.vm-ds-v1 .vm-ds-card {
  border: 1px solid var(--vm-ds-border);
  border-radius: var(--vm-ds-radius-xl);
  background: var(--vm-ds-surface);
  box-shadow: var(--vm-ds-shadow-card);
}

@media (prefers-reduced-motion: reduce) {
  .vm-ds-v1 *,
  .vm-ds-v1 *::before,
  .vm-ds-v1 *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/*
 * Pilot family migration — ID 387 / Pulsni oksimetri.
 * This block is inert until the page root explicitly opts in with:
 *   <section class="vm-oximeter-page vm-ds-v1">
 *
 * It intentionally uses higher selector specificity rather than !important,
 * so the shared system can win over the legacy inline family CSS while the
 * pilot is active. No layout/content selectors outside this family are touched.
 */
.vm-ds-v1.vm-oximeter-page {
  font-family: var(--vm-ds-font-sans);
  background: var(--vm-ds-surface);
  color: var(--vm-ds-text);
}

.vm-ds-v1.vm-oximeter-page .vm-head p,
.vm-ds-v1.vm-oximeter-page .vm-card p,
.vm-ds-v1.vm-oximeter-page .vm-list-item p {
  color: var(--vm-ds-muted);
}

.vm-ds-v1.vm-oximeter-page .vm-card h3,
.vm-ds-v1.vm-oximeter-page .vm-list-item h3 {
  color: var(--vm-ds-navy-800);
}

.vm-ds-v1.vm-oximeter-page .vm-image {
  border-radius: var(--vm-ds-radius-xl);
  background: var(--vm-ds-sky);
  box-shadow: var(--vm-ds-shadow-elevated);
}

.vm-ds-v1.vm-oximeter-page .vm-image:hover {
  box-shadow: 0 28px 70px rgba(8, 42, 70, .15);
}

.vm-ds-v1.vm-oximeter-page .vm-card {
  border-color: var(--vm-ds-border);
  border-radius: var(--vm-ds-radius-xl);
  background: var(--vm-ds-surface);
  box-shadow: var(--vm-ds-shadow-card);
}

.vm-ds-v1.vm-oximeter-page .vm-card:hover {
  box-shadow: var(--vm-ds-shadow-elevated);
}

.vm-ds-v1.vm-oximeter-page .vm-list-item {
  border-color: var(--vm-ds-border);
  border-radius: var(--vm-ds-radius-lg);
  background: var(--vm-ds-sky);
}

.vm-ds-v1.vm-oximeter-page .vm-dark,
.vm-ds-v1.vm-oximeter-page .vm-cta {
  border-radius: var(--vm-ds-radius-xl);
  box-shadow: var(--vm-ds-shadow-elevated);
}

.vm-ds-v1.vm-oximeter-page .vm-dark-card {
  border-radius: var(--vm-ds-radius-xl);
}

.vm-ds-v1.vm-oximeter-page .vm-support {
  border-color: var(--vm-ds-border);
  border-radius: var(--vm-ds-radius-xl);
  background: var(--vm-ds-sky);
  box-shadow: var(--vm-ds-shadow-card);
}


/*
 * v0.1.29 — ID 387 primary CTA accessibility fix.
 * The legacy .vm-btn-primary used #2ea9ff with white text (AA failure).
 * Keep this scoped to the opted-in oximeter pilot and use the approved AA palette.
 */
.vm-ds-v1.vm-oximeter-page .vm-btn-primary {
  background: linear-gradient(135deg, var(--vm-ds-primary-700) 0%, var(--vm-ds-primary-600) 100%);
  color: #fff;
  box-shadow: 0 20px 50px rgba(2,98,138,.34);
}

.vm-ds-v1.vm-oximeter-page .vm-btn-primary:hover,
.vm-ds-v1.vm-oximeter-page .vm-btn-primary:focus-visible {
  background: linear-gradient(135deg, #014f70 0%, var(--vm-ds-primary-700) 100%);
  color: #fff;
}

@media (max-width: 900px) {
  .vm-ds-v1.vm-oximeter-page .vm-hero {
    border-radius: 0 0 var(--vm-ds-radius-xl) var(--vm-ds-radius-xl);
  }
}

/*
 * v0.1.28 — ID 387 mobile hero readability refinement.
 * The legacy mobile gradient was intentionally very dark (0.97 / 0.82 / 0.30),
 * which hid too much of the photograph on phones. Keep the same image and
 * composition, but let more of the subject show while retaining white-text legibility.
 */
@media (max-width: 900px) {
}


/*
 * v0.1.30 — ID 387 CTA hierarchy refinement.
 * The hero anchor is a continuation cue, not a competing conversion action.
 * The support CTA remains a primary conversion action after the support benefits.
 */
.vm-ds-v1.vm-oximeter-page .vm-btn-readmore {
  width: auto;
  justify-self: start;
  padding: 10px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #d4efff;
  box-shadow: none;
  font-weight: 700;
}

.vm-ds-v1.vm-oximeter-page .vm-btn-readmore:hover,
.vm-ds-v1.vm-oximeter-page .vm-btn-readmore:focus-visible {
  background: transparent;
  color: #fff;
  box-shadow: none;
}

.vm-ds-v1.vm-oximeter-page .vm-btn-readmore:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.vm-ds-v1.vm-oximeter-page .vm-support-cta {
  justify-self: start;
  margin-top: 4px;
}

@media (max-width: 900px) {
  .vm-ds-v1.vm-oximeter-page .vm-btn-readmore {
    width: auto;
    justify-self: start;
  }

  .vm-ds-v1.vm-oximeter-page .vm-support-cta {
    width: 100%;
    box-sizing: border-box;
  }
}


/*
 * v0.1.31 — ID 387 hero continuation-link fix.
 * Excluding .vm-btn-readmore from the global primary-CTA refinement lets this
 * scoped component remain a true text link instead of inheriting the blue CTA fill.
 */
.vm-ds-v1.vm-oximeter-page .vm-btn-readmore {
  padding: 8px 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: rgba(255,255,255,.92);
  font-weight: 700;
  border-radius: 0;
  text-decoration: none;
}

.vm-ds-v1.vm-oximeter-page .vm-btn-readmore:hover {
  background: transparent;
  color: #fff;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.vm-ds-v1.vm-oximeter-page .vm-btn-readmore:focus-visible {
  background: transparent;
  color: #fff;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 4px;
  outline: 2px solid rgba(255,255,255,.9);
  outline-offset: 4px;
}