:import {
  -st-from: "../core/CoreText/TextStyle.st.css";
  -st-default: TextStyle;
}

:import {
  -st-from: "../core/CoreText/Text.st.css";
  -st-default: Text;
}

:import {
  -st-from: "../../colors.st.css";
  -st-named: 
  D10, D20, D50,
WHITE;
}

:import {
  -st-from: "../../typography.st.css";
  -st-named: fontUltraThin, fontThin, fontLight;
}

:vars {
  headingText: value(D10);
  subheadingText: value(D20);
  lightHeadingText: value(WHITE);
  lightSubheadingText: value(D50);
}

.root {
  -st-extends: Text;
  -st-states: appearance(string), light;
}

.root:appearance(H1) {
  -st-mixin: TextStyle(
    color value(headingText),
    fontFamily value(fontThin),
    fontSize 36px,
    lineHeight 48px
  );
}

.root:appearance(H1):light {
  -st-mixin: TextStyle(
    color value(lightHeadingText),
    fontFamily value(fontThin),
    fontSize 36px,
    lineHeight 48px
  );
}

.root:appearance(H2) {
  -st-mixin: TextStyle(
    color value(headingText),
    fontFamily value(fontLight),
    fontSize 20px,
    lineHeight 24px
  );
}

.root:appearance(H2):light {
  -st-mixin: TextStyle(
    color value(lightHeadingText),
    fontFamily value(fontLight),
    fontSize 20px,
    lineHeight 24px
  );
}

.root:appearance(H3) {
  -st-mixin: TextStyle(
    color value(subheadingText),
    fontFamily value(fontLight),
    fontSize 13px,
    lineHeight 24px,
    textTransform uppercase,
    letterSpacing 2px
  );
}

.root:appearance(H3):light {
  -st-mixin: TextStyle(
    color value(lightSubheadingText),
    fontFamily value(fontLight),
    fontSize 13px,
    lineHeight 24px,
    textTransform uppercase,
    letterSpacing 2px
  );
}

.root:appearance(H4) {
  -st-mixin: TextStyle(
    color value(subheadingText),
    fontFamily value(fontLight),
    fontSize 10px,
    lineHeight 18px,
    textTransform uppercase,
    letterSpacing 1px
  );
}

.root:appearance(H4):light {
  -st-mixin: TextStyle(
    color value(lightSubheadingText),
    fontFamily value(fontLight),
    fontSize 10px,
    lineHeight 18px,
    textTransform uppercase,
    letterSpacing 1px
  );
}

.root {
  font-weight: normal;
}