/* Design System — Typography / Text styles.
   The Figma file defines type ad-hoc (no shared text styles), so these codify the
   header / paragraph / button / label styles the app actually uses.
   Use the --text-* shorthand tokens inside components (font: var(--text-body));
   the classes below are for the documentation and plain HTML content. */

:root {
  --font-family-heading: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-body:    "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-data:    "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Headers — Segoe UI Semibold */
  --text-display:   600 28px/1.1  var(--font-family-heading);
  --text-h1:        600 24px/1.15 var(--font-family-heading);
  --text-h2:        600 20px/1.2  var(--font-family-heading);
  --text-h3:        600 18px/1.3  var(--font-family-heading);
  --text-title:     600 16px/1.4  var(--font-family-heading);
  --text-subtitle:  600 14px/1.4  var(--font-family-heading);

  /* Paragraphs — Segoe UI Regular */
  --text-body-lg:   400 16px/1.5  var(--font-family-body);
  --text-body:      400 14px/1.5  var(--font-family-body);
  --text-body-sm:   400 12px/1.5  var(--font-family-body);

  /* Button text — Segoe UI Semibold */
  --text-button-lg: 600 18px/1    var(--font-family-heading);
  --text-button:    600 16px/1    var(--font-family-heading);
  --text-button-sm: 600 14px/1    var(--font-family-heading);

  /* Labels & data — Segoe UI */
  --text-label:     600 13.5px/1.4 var(--font-family-data);
  --text-label-sm:  600 12px/1.4   var(--font-family-data);
  --text-caption:   500 11px/1.4   var(--font-family-data);
}

.text-display  { font: var(--text-display);  color: var(--gray-900); }
.text-h1       { font: var(--text-h1);       color: var(--gray-900); }
.text-h2       { font: var(--text-h2);       color: var(--gray-800); }
.text-h3       { font: var(--text-h3);       color: var(--gray-800); }
.text-title    { font: var(--text-title);    color: var(--gray-700); }
.text-subtitle { font: var(--text-subtitle); color: var(--gray-600); }
.text-body-lg  { font: var(--text-body-lg);  color: var(--color-text); }
.text-body     { font: var(--text-body);     color: var(--color-text); }
.text-body-sm  { font: var(--text-body-sm);  color: var(--color-text); }
.text-button   { font: var(--text-button);   }
.text-label    { font: var(--text-label);    color: var(--gray-400); }
.text-label-sm { font: var(--text-label-sm); color: var(--gray-400); }
.text-caption  { font: var(--text-caption);  color: var(--gray-300); }

.ivdsField::placeholder{color:var(--neutral-text-icon-subtle);opacity:1}