<script setup lang="ts">
import { GrHeading } from "@/components";
import { GrParagraph } from "@/components";
</script>

<template>
  <GrHeading as="h3" weight="medium">Headings</GrHeading>
  <GrParagraph fontSize="sm" color="gray-100" style="margin-bottom: 30px">Título de páginas, sessões etc.</GrParagraph>

  <section>
    <GrHeading as="h1" plus weight="bold">The quick brown fox jumps over the lazy dog</GrHeading>
    <span class="legend">H1+</span>
    <GrParagraph color="gray-100" weight="medium">
      Commonly used for large H1 headings to <br />
      put strong emphasis on bold <br />
      typography.
    </GrParagraph>
  </section>

  <hr />

  <main>
    <section style="margin-top: 20px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 15px">
      <section style="display: flex; gap: 40px">
        <section>
          <GrHeading as="h1" weight="bold" style="margin-bottom: 30px"
          >The quick brown fox jumps over the lazy</GrHeading
          >
          <span class="legend">H1</span>
          <GrParagraph color="gray-100" weight="medium">
            Lorem Ipsum is simply dummy text of the <br />
            printing and typesetting industry. Lorem <br />Ipsum has been the industry's standard
          </GrParagraph>
          <hr />
        </section>

        <section>
          <GrHeading as="h1" weight="light" style="margin-bottom: 30px"
          >The quick brown fox jumps over the lazy</GrHeading
          >
          <span class="legend">H1 - Light</span>
          <GrParagraph color="gray-100" weight="medium">
            Lorem Ipsum is simply dummy text of the <br />
            printing and typesetting industry. Lorem <br />Ipsum has been the industry's standard
          </GrParagraph>
          <hr />
        </section>
      </section>

      <section style="display: flex; gap: 20px">
        <section>
          <GrHeading as="h2" weight="bold" style="margin-bottom: 30px"
          >The quick brown fox jumps over the lazy dog</GrHeading
          >
          <span class="legend">H2</span>
          <GrParagraph color="gray-100" weight="medium">
            Lorem Ipsum is simply dummy text of the <br />
            printing and typesetting industry. Lorem <br />Ipsum has been the industry's standard
          </GrParagraph>
        </section>
      </section>
      <hr />

      <section style="display: flex; gap: 20px">
        <section>
          <GrHeading as="h3" weight="medium" style="margin-bottom: 30px"
          >The quick brown fox jumps over the lazy</GrHeading
          >
          <span class="legend">H3</span>
          <GrParagraph color="gray-100" weight="medium">
            Lorem Ipsum is simply dummy text of the <br />
            printing and typesetting industry. Lorem <br />Ipsum has been the industry's standard
          </GrParagraph>
          <hr />
        </section>

        <section>
          <GrHeading as="h3" weight="bold" style="margin-bottom: 30px"
          >The quick brown fox jumps over the lazy</GrHeading
          >
          <span class="legend">H3 - Bold</span>
          <GrParagraph color="gray-100" weight="medium">
            Lorem Ipsum is simply dummy text of the <br />
            printing and typesetting industry. Lorem <br />Ipsum has been the industry's standard
          </GrParagraph>
        </section>
      </section>

      <section style="display: flex">
        <section>
          <GrHeading as="h4" weight="bold" style="margin-bottom: 30px"
          >The quick brown fox jumps over the lazy dog</GrHeading
          >
          <span class="legend">H4</span>
          <GrParagraph color="gray-100" weight="medium">
            Lorem Ipsum is simply dummy text of the <br />
            printing and typesetting industry. Lorem <br />Ipsum has been the industry's standard
          </GrParagraph>
        </section>
      </section>
    </section>
  </main>
</template>

<style lang="scss" scoped>
hr {
  border: 1px solid var(--gray-50);
}

main {
  max-width: 935px;
  margin: 0 auto;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.legend {
  font-family: Plus Jakarta Sans;
  font-size: 16px;
  font-style: italic;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
  display: block;
  color: #009488;
  margin: 10px 0;
}
</style>
