@use "./init/reset.scss" as initReset;
@use "./init/document.scss" as initDocument;

@use "./color/index.scss" as colorTokens;
@use "./spacing/padding.scss" as spacingPadding;
@use "./spacing/gap.scss" as spacingGap;
@use "./layout/breakpoint.scss" as layoutBreakpoint;
@use "./layout/size.scss" as layoutSize;
@use "./layout/radius.scss" as layoutRadius;
@use "./scss/responsive.scss" as responsiveScale;
@use "./typography/fonts/font-face.scss" as typoFontFace;
@use "./typography/fonts/font-family.scss" as typoFontFamily;
@use "./typography/styles/display.scss" as typoDisplay;
@use "./typography/styles/heading.scss" as typoHeading;
@use "./typography/styles/body.scss" as typoBody;
@use "./typography/styles/label.scss" as typoLabel;
@use "./typography/styles/caption.scss" as typoCaption;

@layer foundation.reset {
  @include initReset.foundation-reset();
  @include initDocument.foundation-document();
}

@layer foundation.tokens {
  @include typoFontFace.foundation-typography-font-face();

  /* foundation 토큰을 단일 :root 블록으로 모아 중복 선언을 방지한다. */
  :root {
    @include colorTokens.foundation-color-tokens();
    @include spacingPadding.foundation-spacing-padding();
    @include spacingGap.foundation-spacing-gap();
    @include layoutBreakpoint.foundation-layout-breakpoint();
    @include layoutSize.foundation-layout-size();
    @include layoutRadius.foundation-layout-radius();
    @include typoFontFamily.foundation-typography-font-family();
    @include typoDisplay.foundation-typography-display();
    @include typoHeading.foundation-typography-heading();
    @include typoBody.foundation-typography-body();
    @include typoLabel.foundation-typography-label();
    @include typoCaption.foundation-typography-caption();
    @include responsiveScale.base();
  }

  // 반응형 rem 보정은 단일 믹스인으로 media query를 출력한다.
  @include responsiveScale.queries();
}
