/* ==========================================================
   Baziniai stiliai: reset, šriftas, antraštės, tipografijos klasės.
   Klasių pavadinimai tokie pat kaip sufleris-ds-storybook (.ds-h1 ir t.t.),
   kad būtų lengva perkelti į produkciją.
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ds-font-family);
  font-size: var(--ds-text-md-size);
  line-height: var(--ds-text-md-lh);
  color: var(--ds-text-body);
  background: var(--ds-bg-shell);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--ds-link); }
a:hover { color: var(--ds-link-hover); }
[x-cloak] { display: none !important; }

:focus-visible { outline: 2px solid var(--ds-teal-500); outline-offset: 2px; }

/* ---------- Tipografija ---------- */
h1, .ds-h1 { margin: 0; font-size: var(--ds-h1-size); line-height: var(--ds-h1-lh); font-weight: 700; color: var(--ds-text-title); }
h2, .ds-h2 { margin: 0; font-size: var(--ds-h2-size); line-height: var(--ds-h2-lh); font-weight: 700; color: var(--ds-text-title); }
h3, .ds-h3 { margin: 0; font-size: var(--ds-h3-size); line-height: var(--ds-h3-lh); font-weight: 700; color: var(--ds-text-title); }
h4, .ds-h4 { margin: 0; font-size: var(--ds-h4-size); line-height: var(--ds-h4-lh); font-weight: 700; color: var(--ds-text-title); }
h5, .ds-h5 { margin: 0; font-size: var(--ds-h5-size); line-height: var(--ds-h5-lh); font-weight: 700; color: var(--ds-text-title); }
p { margin: 0; }

.ds-text-lg    { font-size: var(--ds-text-lg-size);    line-height: var(--ds-text-lg-lh);    font-weight: 600; }
.ds-text-md    { font-size: var(--ds-text-md-size);    line-height: var(--ds-text-md-lh);    font-weight: 400; }
.ds-text-intro { font-size: var(--ds-text-intro-size); line-height: var(--ds-text-intro-lh); font-weight: 400; }
.ds-text-sm    { font-size: var(--ds-text-sm-size);    line-height: var(--ds-text-sm-lh);    font-weight: 400; }
.ds-text-xs    { font-size: var(--ds-text-xs-size);    line-height: var(--ds-text-xs-lh);    font-weight: 400; }
.ds-caption    { font-size: var(--ds-caption-size);    line-height: var(--ds-caption-lh);    font-weight: 400; }
.ds-muted      { color: var(--ds-text-muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}