/* Copied from design-system/base.css by scripts/sync-design-system.mjs. Do not edit here. */
/* Your Data Worth base styles. Requires tokens.css. */

/* Surfaces. Each sets the text colors that pass on it, so components stay legible on any ground.
   The page ground is white. Paper is the secondary band color. Ochre is an accent, never a ground. */
:root,
.ydw-surface-white {
  --ydw-surface: var(--ydw-color-white);
  --ydw-text: var(--ydw-color-ink);
  --ydw-text-secondary: var(--ydw-color-label);
  --ydw-focus-color: var(--ydw-color-focus);
}
.ydw-surface-paper {
  --ydw-surface: var(--ydw-color-paper);
  --ydw-text: var(--ydw-color-ink);
  --ydw-text-secondary: var(--ydw-color-label);
  --ydw-focus-color: var(--ydw-color-focus);
}
.ydw-surface-ink {
  --ydw-surface: var(--ydw-color-ink);
  --ydw-text: var(--ydw-color-white);
  --ydw-text-secondary: var(--ydw-color-white);
  --ydw-focus-color: var(--ydw-color-focus-on-ink);
}
.ydw-surface-white,
.ydw-surface-paper,
.ydw-surface-ink {
  background-color: var(--ydw-surface);
  color: var(--ydw-text);
}

/* Reset */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--ydw-color-white);
  color: var(--ydw-color-ink);
  font-family: var(--ydw-font-family);
  font-size: var(--ydw-size-body);
  font-weight: var(--ydw-weight-body);
  line-height: var(--ydw-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, fieldset, legend { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
[hidden] { display: none !important; } /* components set display, so the hidden attribute needs this to win */
ol[role="list"], ul[role="list"] { list-style: none; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; border-spacing: 0; }
::selection { background-color: var(--ydw-color-ink); color: var(--ydw-color-ochre); }

/* Type scale. Headlines 800 with tight tracking, labels 500, body 400. */
h1, h2, h3, h4,
.ydw-display, .ydw-h1, .ydw-h2, .ydw-h3, .ydw-h4 {
  font-weight: var(--ydw-weight-heavy);
  letter-spacing: var(--ydw-tracking-headline);
  line-height: var(--ydw-leading-heading);
  text-wrap: balance;
}
.ydw-display { font-size: var(--ydw-size-display); line-height: var(--ydw-leading-tight); }
h1, .ydw-h1 { font-size: var(--ydw-size-h1); line-height: var(--ydw-leading-tight); }
h2, .ydw-h2 { font-size: var(--ydw-size-h2); }
h3, .ydw-h3 { font-size: var(--ydw-size-h3); }
h4, .ydw-h4 { font-size: var(--ydw-size-h4); letter-spacing: -0.01em; }
.ydw-lede { font-size: var(--ydw-size-lede); line-height: 1.45; font-weight: var(--ydw-weight-body); text-wrap: pretty; }
.ydw-body { font-size: var(--ydw-size-body); line-height: var(--ydw-leading-body); text-wrap: pretty; }
.ydw-small { font-size: var(--ydw-size-small); line-height: 1.5; }
.ydw-caption { font-size: var(--ydw-size-caption); line-height: 1.45; color: var(--ydw-text-secondary); }
.ydw-label {
  font-size: var(--ydw-size-label);
  font-weight: var(--ydw-weight-label);
  letter-spacing: var(--ydw-tracking-label);
  line-height: var(--ydw-leading-ui);
  color: var(--ydw-text-secondary);
}
.ydw-measure { max-width: var(--ydw-measure); }
strong, b, .ydw-emphasis { font-weight: var(--ydw-weight-label); }

/* Numerals. Every amount of money uses tabular lining figures. */
.ydw-money, .ydw-num, [data-money] {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--ydw-numerals);
}
.ydw-numeral {
  font-weight: var(--ydw-weight-heavy);
  letter-spacing: var(--ydw-tracking-numeral);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--ydw-numerals);
}
.ydw-numeral--xl { font-size: var(--ydw-size-numeral-xl); }
.ydw-numeral--lg { font-size: var(--ydw-size-numeral-lg); }
.ydw-numeral--md { font-size: var(--ydw-size-numeral-md); }

/* Links: ink, 2px underline. Thicker on hover. */
a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: var(--ydw-rule);
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: auto;
}
a:hover { text-decoration-thickness: 3px; }

/* Focus: 3px ring, 4px offset, color from the surface. */
:focus { outline: none; }
:focus-visible {
  outline: var(--ydw-focus-width) solid var(--ydw-focus-color, var(--ydw-color-focus));
  outline-offset: var(--ydw-focus-offset);
}

.ydw-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

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