/* Element defaults + the typographic utility classes the system ships with.
   Mirrors PI_DesignSystem/wwwroot/components/typography.css. */
html{font-size:16px;position:relative;min-height:100%}
body{font-family:var(--font-family-default);font-size:var(--font-size-medium);line-height:var(--line-height-default);font-weight:var(--font-weight-light);color:var(--text-color-main);background:var(--background-color-body);margin:0;-webkit-font-smoothing:antialiased}
*,*::before,*::after{box-sizing:border-box}

h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6,.h-sm,.h-xs{margin-top:0;margin-bottom:0.5rem;font-weight:var(--font-weight-semibold);font-family:var(--font-family-default)}
h1,.h1{font-size:var(--h1-size);line-height:var(--h1-line)}
h2,.h2{font-size:var(--h2-size);line-height:var(--h2-line)}
h3,.h3{font-size:var(--h3-size);line-height:var(--h3-line)}
h4,.h4{font-size:var(--h4-size);line-height:var(--h4-line)}
h5,.h5{font-size:var(--h5-size);line-height:var(--h5-line)}
h6,.h6{font-size:var(--h6-size);line-height:var(--h6-line)}
.h-sm{font-size:var(--h-sm-size);line-height:var(--h-sm-line)}
.h-xs{font-size:var(--h-xs-size);line-height:var(--h-xs-line)}

p{margin-top:0;margin-bottom:0.75rem}
.body-lg,.body-md,.body-sm{font-weight:var(--font-weight-light);margin-bottom:0}
.body-lg{font-size:16px;line-height:20px}
.body-md{font-size:14px;line-height:20px}
.body-sm{font-size:12px;line-height:16px}
.body-tag{font-size:11px;line-height:16px;font-weight:var(--font-weight-regular);margin-bottom:0}
.mono{font-family:var(--font-family-mono);font-size:12px;line-height:16px;letter-spacing:0.01em}

b,strong{font-weight:var(--font-weight-semibold)}
.fw-light{font-weight:var(--font-weight-light)}
.fw-regular{font-weight:var(--font-weight-regular)}
.fw-medium{font-weight:var(--font-weight-medium)}
.fw-semibold{font-weight:var(--font-weight-semibold)}
.font-family-default{font-family:var(--font-family-default)}
.font-family-display{font-family:var(--font-family-display)}

a{color:var(--link-color);text-decoration:none}
a:hover{color:var(--link-color-hover);text-decoration:underline}

.color-black{color:var(--text-color-main)}
.color-subdued{color:var(--text-color-subdued)}
.color-theme{color:var(--accent-ink)}
.color-danger{color:var(--danger-color)}
.color-white{color:var(--white)}
.bgc-white{background-color:var(--white)}
.bgc-body{background:var(--background-color-body)}
.bgc-theme{background-color:var(--theme-color)}
.bgc-primary{background-color:var(--primary-color)}

/* Focus-ring fallback. Components that style with inline objects inherit no
   component stylesheet, so they would otherwise show no ring at all. :where()
   keeps specificity at 0 — every rule in css/ still wins over this. */
:where(a,button,summary,[role=button],[role=tab],[role=option],[role=menuitem],[tabindex]):focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}