/* PulsarComponents base styles.
   Component styles reference --pulsar-* custom properties with inline fallbacks
   (var(--x, fallback)), so this file only needs a minimal reset — the real token
   values are supplied at runtime by PulsarThemeProvider. */

.pulsar-root,
[class^="pulsar-"],
[class*=" pulsar-"] {
    box-sizing: border-box;
}

/* PulsarText (Components/Text/PulsarText.cs) has no .razor file — its rendered tag varies per
   Variant/As, which only a manual BuildRenderTree override can express, and a Razor-generated
   component always emits its OWN BuildRenderTree, which would collide with a hand-written one in a
   .razor.cs partial. That means the Razor compiler's usual CSS-isolation pass (which rewrites a
   generated BuildRenderTree to stamp a [b-xxxxx] scope attribute onto root elements) never runs for
   it either, so a .razor.css file here would compile fine and silently match nothing — the exact
   same class of bug as a bare leading "::deep" rule with no real anchor (see MainLayout.razor.css in
   PulsarComponents.Sample). These rules live here, globally, for that reason — every value is still
   theme-driven via var(), so it's no less "themed" than a scoped file would be, just not isolated. */

.pulsar-text {
    font-family: var(--pulsar-typography-font-family);
    color: var(--pulsar-text-accent, var(--pulsar-palette-text-primary));
    margin: 0;
}

.pulsar-text--h1 {
    font-size: var(--pulsar-typography-h1-font-size);
    font-weight: var(--pulsar-typography-h1-font-weight);
    line-height: var(--pulsar-typography-h1-line-height);
    letter-spacing: var(--pulsar-typography-h1-letter-spacing);
}

.pulsar-text--h2 {
    font-size: var(--pulsar-typography-h2-font-size);
    font-weight: var(--pulsar-typography-h2-font-weight);
    line-height: var(--pulsar-typography-h2-line-height);
    letter-spacing: var(--pulsar-typography-h2-letter-spacing);
}

.pulsar-text--h3 {
    font-size: var(--pulsar-typography-h3-font-size);
    font-weight: var(--pulsar-typography-h3-font-weight);
    line-height: var(--pulsar-typography-h3-line-height);
    letter-spacing: var(--pulsar-typography-h3-letter-spacing);
}

.pulsar-text--h4 {
    font-size: var(--pulsar-typography-h4-font-size);
    font-weight: var(--pulsar-typography-h4-font-weight);
    line-height: var(--pulsar-typography-h4-line-height);
    letter-spacing: var(--pulsar-typography-h4-letter-spacing);
}

.pulsar-text--h5 {
    font-size: var(--pulsar-typography-h5-font-size);
    font-weight: var(--pulsar-typography-h5-font-weight);
    line-height: var(--pulsar-typography-h5-line-height);
    letter-spacing: var(--pulsar-typography-h5-letter-spacing);
}

.pulsar-text--h6 {
    font-size: var(--pulsar-typography-h6-font-size);
    font-weight: var(--pulsar-typography-h6-font-weight);
    line-height: var(--pulsar-typography-h6-line-height);
    letter-spacing: var(--pulsar-typography-h6-letter-spacing);
}

.pulsar-text--subtitle1 {
    font-size: var(--pulsar-typography-subtitle1-font-size);
    font-weight: var(--pulsar-typography-subtitle1-font-weight);
    line-height: var(--pulsar-typography-subtitle1-line-height);
    letter-spacing: var(--pulsar-typography-subtitle1-letter-spacing);
}

.pulsar-text--subtitle2 {
    font-size: var(--pulsar-typography-subtitle2-font-size);
    font-weight: var(--pulsar-typography-subtitle2-font-weight);
    line-height: var(--pulsar-typography-subtitle2-line-height);
    letter-spacing: var(--pulsar-typography-subtitle2-letter-spacing);
}

.pulsar-text--body1 {
    font-size: var(--pulsar-typography-body1-font-size);
    font-weight: var(--pulsar-typography-body1-font-weight);
    line-height: var(--pulsar-typography-body1-line-height);
    letter-spacing: var(--pulsar-typography-body1-letter-spacing);
}

.pulsar-text--body2 {
    font-size: var(--pulsar-typography-body2-font-size);
    font-weight: var(--pulsar-typography-body2-font-weight);
    line-height: var(--pulsar-typography-body2-line-height);
    letter-spacing: var(--pulsar-typography-body2-letter-spacing);
}

.pulsar-text--caption {
    font-size: var(--pulsar-typography-caption-font-size);
    font-weight: var(--pulsar-typography-caption-font-weight);
    line-height: var(--pulsar-typography-caption-line-height);
    letter-spacing: var(--pulsar-typography-caption-letter-spacing);
}

.pulsar-text--overline {
    font-size: var(--pulsar-typography-overline-font-size);
    font-weight: var(--pulsar-typography-overline-font-weight);
    line-height: var(--pulsar-typography-overline-line-height);
    letter-spacing: var(--pulsar-typography-overline-letter-spacing);
    text-transform: uppercase;
}

.pulsar-text--gutter-bottom {
    margin-bottom: 0.5em;
}