/* System aliases, layout sizes and component rhythm consume the brand primitives.
   Approved palette and identity values belong in tokens.css. */
:root {
  --g-page: var(--vm-white);
  --g-wash: var(--vm-ink-10);
  --g-wash-2: var(--vm-ink-20);
  --g-derma: var(--vm-nude-10);
  --g-derma-2: var(--vm-nude-20);
  --g-dark: var(--vm-ink-100);
  /* Hover ground for white text: ink-80 alone is 4.31:1 with white; this mix is 4.65:1 (AA). */
  --g-hover: color-mix(in srgb, var(--vm-ink-80) 80%, var(--vm-ink-100));
  --g-panel: var(--vm-ink-10);

  --t-body: var(--vm-on-light);
  /* AA on white and all specialty 10/20 tints (minimum 4.63:1 on mauve-20). */
  --t-muted: color-mix(in srgb, var(--vm-ink-80) 35%, var(--vm-ink-100));
  --t-mute: var(--t-muted);
  --t-on-dark: var(--vm-on-ink);
  --t-on-dark-muted: var(--vm-on-ink-muted);
  --t-on-dark-accent: var(--vm-on-ink-muted);

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: var(--sect-pad);
  --sect-pad: 64px;
  --band-pad: 56px;

  --sp-h2-text: 16px;
  --sp-h3-text: 8px;
  --sp-p: 16px;
  --sp-li: 8px;
  --sp-comp: 32px;
  --sp-grid: 24px;

  --w-page: 1200px;
  --w-main: 744px;
  --w-aside: 384px;
  --gap-aside: 72px;
  --w-prose: var(--w-main);
  --gutter: clamp(20px, 4vw, 48px);

  --r-0: 0;
  --r-input: 4px;
  --r-card: 12px;
  --r-media: 8px;
  --r-btn: 8px;
  --line-light: 1px solid var(--vm-ink-20);
  --line-dark: 1px solid var(--vm-ink-80);
  --shadow-panel: 0 24px 48px -24px color-mix(in srgb, var(--vm-ink-100) 35%, transparent);
  --shadow-lift: 0 12px 28px -16px color-mix(in srgb, var(--vm-ink-100) 28%, transparent);
  --shadow-dark: 0 24px 48px -20px color-mix(in srgb, var(--vm-ink-100) 45%, transparent);

  --ease-valve: cubic-bezier(0.3, 0, 0.175, 1);
  --valve-part: 7%; /* open-state stroke parting; the crossing must survive it */
  --t-fast: 160ms;
  --t-med: 360ms;
  --t-slow: 700ms;
  --focus-ring: 2px solid var(--vm-blue-100);

  --z-header: 40;
  --z-overlay: 50;
  --z-lightbox: 60;

  --fs-hero: var(--fs-h1);
  --fs-h1: 44px;
  --fs-h2: 30px;
  --fs-h3: 20px;
  --fs-lede: 20px;
  --fs-body: 17px;
  --fs-small: 0.875rem;
  --fs-label: 13px;
  --fs-price: 36px;
  --fs-btn: 16px;
  --fs-question: 18px;
  --lh-h1: 1.1;
  --lh-h2: 1.2;
  --lh-h3: 1.3;
  --lh-lede: 1.5;
  --lh-body: 1.6;
  --vm-track-label: 0.08em;
}

:root,
.stream--klinika,
.stream--zilni,
[data-specialty="klinika"],
[data-specialty="zilni"] {
  --acc-100: var(--vm-blue-100);
  --acc-40: var(--vm-blue-40);
  --acc-20: var(--vm-blue-20);
  --acc-10: var(--vm-blue-10);
}

.stream--plast,
[data-specialty="plast"] {
  --acc-100: var(--vm-mauve-100);
  --acc-40: var(--vm-mauve-40);
  --acc-20: var(--vm-mauve-20);
  --acc-10: var(--vm-mauve-10);
}

.stream--derma,
[data-specialty="derma"] {
  --acc-100: var(--vm-nude-100);
  --acc-40: var(--vm-nude-40);
  --acc-20: var(--vm-nude-20);
  --acc-10: var(--vm-nude-10);
}

@media (max-width: 767px) {
  :root {
    --sect-pad: 40px;
    --band-pad: 32px;
    --sp-h2-text: 12px;
    --sp-comp: 24px;
    --sp-grid: 12px;
    --gutter: 16px;
    --fs-h1: 32px;
    --fs-h2: 24px;
    --fs-h3: 18px;
    --fs-lede: 18px;
    --fs-body: 16px;
  }
}