/* Slice 08 v2 — base reset (Epic 525, Issue 526). Load after Bootstrap and css/tokens.css.
   With tokens.css, the only file allowed to set font-family (Stylelint). */

/* §2: signed-in app only (dashboard, SA). Public pages stay at the 16px browser default. */
html.product-type-scale { font-size: 112%; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  font-weight: var(--text-body-weight);
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
}

/* Native controls inherit the face instead of the UA default. */
input,
select,
textarea,
button,
optgroup {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* Chrome draws date/time fields with its own face (Starts/Ends, Draw Date, Send time). */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
  font: inherit;
  color: inherit;
}

input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit {
  font-family: inherit;
  color: inherit;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-heading);
  color: var(--foreground);
}

/* Dashboard page titles are <h2> and card titles <h5>, so h2 carries the H1 role and
   each heading level below it steps down one role. */
h1, .h1 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line-height);
  font-weight: var(--text-h1-weight);
  letter-spacing: var(--text-h1-tracking);
}

h2, .h2 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line-height);
  font-weight: var(--text-h1-weight);
  letter-spacing: var(--text-h1-tracking);
}

h3, .h3 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
  font-weight: var(--text-h2-weight);
  letter-spacing: var(--text-h2-tracking);
}

h4, .h4 {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  font-weight: var(--text-h3-weight);
  letter-spacing: var(--text-h3-tracking);
}

h5, .h5, h6, .h6 {
  font-size: var(--text-title-size);
  line-height: var(--text-title-line-height);
  font-weight: var(--text-title-weight);
  letter-spacing: var(--text-title-tracking);
}

small, .small { font-size: var(--text-small-size); line-height: var(--text-small-line-height); }

a { color: var(--link); }
a:hover { color: var(--link-hover); }

code, kbd, samp, pre, .font-monospace {
  font-family: var(--font-mono);
}

code {
  font-size: var(--text-mono-size);
  line-height: var(--text-mono-line-height);
  color: var(--foreground);
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ring) 50%, transparent);
  outline-offset: 1px;
}

/* Lucide icons (inline SVG). 1rem default; badges, buttons and the top bar size them in components. */
.ps-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: var(--icon-size);
  height: var(--icon-size);
  vertical-align: -0.125em;
}

/* §3 type-role utilities (the vanilla stand-in for Tether's text-h1… Tailwind utilities). */
.ps-text-display {
  font-family: var(--font-heading);
  font-size: var(--text-display-size);
  line-height: var(--text-display-line-height);
  font-weight: var(--text-display-weight);
  letter-spacing: var(--text-display-tracking);
}

@media (min-width: 640px) {
  .ps-text-display {
    font-size: var(--text-display-size-sm);
    line-height: var(--text-display-line-height-sm);
  }
}

.ps-text-h1 { font-family: var(--font-heading); font-size: var(--text-h1-size); line-height: var(--text-h1-line-height); font-weight: var(--text-h1-weight); letter-spacing: var(--text-h1-tracking); }
.ps-text-h2 { font-family: var(--font-heading); font-size: var(--text-h2-size); line-height: var(--text-h2-line-height); font-weight: var(--text-h2-weight); letter-spacing: var(--text-h2-tracking); }
.ps-text-h3 { font-family: var(--font-heading); font-size: var(--text-h3-size); line-height: var(--text-h3-line-height); font-weight: var(--text-h3-weight); letter-spacing: var(--text-h3-tracking); }
.ps-text-title { font-family: var(--font-heading); font-size: var(--text-title-size); line-height: var(--text-title-line-height); font-weight: var(--text-title-weight); }
.ps-text-body { font-family: var(--font-sans); font-size: var(--text-body-size); line-height: var(--text-body-line-height); font-weight: var(--text-body-weight); }
.ps-text-body-lg { font-family: var(--font-sans); font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line-height); }
.ps-text-small { font-family: var(--font-sans); font-size: var(--text-small-size); line-height: var(--text-small-line-height); }
.ps-text-label { font-family: var(--font-sans); font-size: var(--text-label-size); line-height: var(--text-label-line-height); font-weight: var(--text-label-weight); }
.ps-text-mono { font-family: var(--font-mono); font-size: var(--text-mono-size); line-height: var(--text-mono-line-height); }
.ps-text-nav {
  font-family: var(--font-sans);
  font-size: var(--text-nav-size);
  font-weight: var(--text-nav-weight);
  letter-spacing: var(--text-nav-tracking);
  text-transform: var(--text-nav-transform);
}