<template>
  <main class="p-5 container mx-auto">
    <NuxtLink to="/" class="my-16">Back</NuxtLink>
    <section class="text-sm">
      <h2 class="my-4 text-center text-4xl">Colours</h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-8">
        <!-- Consumo -->
        <div>
          <h3 class="text-lg font-semibold mb-2">Consumo</h3>
          <ul class="flex flex-col gap-2">
            <li class="flex items-center gap-2">
              <div class="h-4 w-4 bg-consumo-base"></div>
              <p>consumo-base</p>
            </li>
            <li class="flex items-center gap-2">
              <div class="h-4 w-4 bg-consumo-light"></div>
              <p>consumo-light</p>
            </li>
            <li class="flex items-center gap-2">
              <div class="h-4 w-4 bg-consumo-extra-light"></div>
              <p>consumo-extra-light</p>
            </li>
          </ul>
        </div>

        <!-- Iguales -->
        <div>
          <h3 class="text-lg font-semibold mb-2">Iguales</h3>
          <ul class="flex flex-col gap-2">
            <li class="flex items-center gap-2">
              <div class="h-4 w-4 bg-iguales-base"></div>
              <p>iguales-base</p>
            </li>
            <li class="flex items-center gap-2">
              <div class="h-4 w-4 bg-iguales-light"></div>
              <p>iguales-light</p>
            </li>
            <li class="flex items-center gap-2">
              <div class="h-4 w-4 bg-iguales-extra-light"></div>
              <p>iguales-extra-light</p>
            </li>
          </ul>
        </div>

        <!-- Aula -->
        <div>
          <h3 class="text-lg font-semibold mb-2">Aula</h3>
          <ul class="flex flex-col gap-2">
            <li class="flex items-center gap-2">
              <div class="h-4 w-4 bg-aula-base"></div>
              <p>aula-base</p>
            </li>
            <li class="flex items-center gap-2">
              <div class="h-4 w-4 bg-aula-light"></div>
              <p>aula-light</p>
            </li>
            <li class="flex items-center gap-2">
              <div class="h-4 w-4 bg-aula-extra-light"></div>
              <p>aula-extra-light</p>
            </li>
          </ul>
        </div>

        <!-- Certifica -->
        <div>
          <h3 class="text-lg font-semibold mb-2">Certifica</h3>
          <ul class="flex flex-col gap-2">
            <li class="flex items-center gap-2">
              <div class="h-4 w-4 bg-certifica-base"></div>
              <p>certifica-base</p>
            </li>
            <li class="flex items-center gap-2">
              <div class="h-4 w-4 bg-certifica-light"></div>
              <p>certifica-light</p>
            </li>
            <li class="flex items-center gap-2">
              <div class="h-4 w-4 bg-certifica-extra-light"></div>
              <p>certifica-extra-light</p>
            </li>
          </ul>
        </div>

        <!-- Foro -->
        <div>
          <h3 class="text-lg font-semibold mb-2">Foro</h3>
          <ul class="flex flex-col gap-2">
            <li class="flex items-center gap-2">
              <div class="h-4 w-4 bg-foro-base"></div>
              <p>foro-base</p>
            </li>
            <li class="flex items-center gap-2">
              <div class="h-4 w-4 bg-foro-light"></div>
              <p>foro-light</p>
            </li>
            <li class="flex items-center gap-2">
              <div class="h-4 w-4 bg-foro-extra-light"></div>
              <p>foro-extra-light</p>
            </li>
          </ul>
        </div>

        <!-- ODS -->
        <div>
          <h3 class="text-lg font-semibold mb-2">ODS</h3>
          <ul class="flex flex-col gap-2">
            <li class="flex items-center gap-2">
              <div class="h-4 w-4 bg-ods-base"></div>
              <p>ods-base</p>
            </li>
            <li class="flex items-center gap-2">
              <div class="h-4 w-4 bg-ods-light"></div>
              <p>ods-light</p>
            </li>
            <li class="flex items-center gap-2">
              <div class="h-4 w-4 bg-ods-extra-light"></div>
              <p>ods-extra-light</p>
            </li>
          </ul>
        </div>
        <!-- Background -->
        <div>
          <h3 class="text-lg font-semibold mb-2">Background</h3>
          <ul class="flex flex-col gap-2">
            <li class="flex items-center gap-2">
              <div class="h-4 w-4 bg-background-dark"></div>
              <p>background-dark</p>
            </li>
            <li class="flex items-center gap-2">
              <div class="h-4 w-4 bg-background-dark-2"></div>
              <p>background-dark-2</p>
            </li>
            <li class="flex items-center gap-2">
              <div class="h-4 w-4 bg-background-light"></div>
              <p>background-light</p>
            </li>
            <li class="flex items-center gap-2">
              <div class="h-4 w-4 bg-background-extra-light"></div>
              <p>background-extra-light</p>
            </li>
          </ul>
        </div>
        <!-- Buttons -->
        <div>
          <h3 class="text-lg font-semibold mb-2">Buttons</h3>
          <ul class="flex flex-col gap-2">
            <li class="flex items-center gap-2">
              <div class="h-4 w-4 bg-button"></div>
              <p>button</p>
            </li>
            <li class="flex items-center gap-2">
              <div class="h-4 w-4 bg-button-hover"></div>
              <p>button-hover</p>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <section class="text-sm mt-16">
      <h2 class="my-4 text-center text-4xl">Fonts</h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
        <div>
          <h3 class="text-lg font-semibold mb-2">Barlow Semi Condensed</h3>
          <p class="font-barlow-semi-condensed text-base">This is a sample text in Barlow Semi Condensed.</p>
        </div>
        <div>
          <h3 class="text-lg font-semibold mb-2">Barlow</h3>
          <p class="font-barlow text-base">This is a sample text in Barlow.</p>
        </div>
      </div>
      <div class="mt-8">
        <h3 class="text-lg font-semibold mb-2">Font Sizes</h3>
        <ul class="flex flex-col gap-4">
          <li class="flex justify-between py-2 border-t border-t-black">
            <h4 class="text-lg w-1/3">Heading H1 (48px) - <span class="italic text-gray-400">Tailwind Text 5XL</span></h4>
            <p class="text-5xl w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
          </li>
          <li class="flex justify-between py-2 border-t border-t-black">
            <h4 class="text-lg w-1/3">Heading H2 (36px) - <span class="italic text-gray-400">Tailwind Text 4XL</span></h4>
            <p class="text-4xl w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
          </li>
          <li class="flex justify-between py-2 border-t border-t-black">
            <h4 class="text-lg w-1/3">Heading H3 (32px) - <span class="italic text-gray-400">Tailwind Text 8</span></h4>
            <p class="text-8 w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
          </li>
          <li class="flex justify-between py-2 border-t border-t-black">
            <h4 class="text-lg w-1/3">Heading H4 (22px) - <span class="italic text-gray-400">Tailwind Text 5.5</span></h4>
            <p class="text-5.5 w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
          </li>
          <li class="flex justify-between py-2 border-t border-t-black">
            <h4 class="text-lg w-1/3">Heading H5 (16px) - <span class="italic text-gray-400">Tailwind Text Base</span></h4>
            <p class="text-base w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
          </li>
          <li class="flex justify-between py-2 border-t border-t-black">
            <h4 class="text-lg w-1/3">Body-Text-2-Extra-Large (24px) - <span class="italic text-gray-400">Tailwind Text 2XL</span></h4>
            <p class="text-2xl w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
          </li>
          <li class="flex justify-between py-2 border-t border-t-black">
            <h4 class="text-lg w-1/3">Body-Text-Extra-Large (18px) - <span class="italic text-gray-400">Tailwind Text LG</span></h4>
            <p class="text-lg w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
          </li>
          <li class="flex justify-between py-2 border-t border-t-black">
            <h4 class="text-lg w-1/3">Body-Text-Large (16px) - <span class="italic text-gray-400">Tailwind Text Base</span></h4>
            <p class="text-base w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
          </li>
          <li class="flex justify-between py-2 border-t border-t-black">
            <h4 class="text-lg w-1/3">Body-Text-Medium (14px) - <span class="italic text-gray-400">Tailwind Text SM</span></h4>
            <p class="text-sm w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
          </li>
          <li class="flex justify-between py-2 border-t border-t-black">
            <h4 class="text-lg w-1/3">Body-Text-Small (12px) - <span class="italic text-gray-400">Tailwind Text XS</span></h4>
            <p class="text-xs w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
          </li>
          <li class="flex justify-between py-2 border-t border-t-black">
            <h4 class="text-lg w-1/3">Text Button (16px) - <span class="italic text-gray-400">Tailwind Text Base</span></h4>
            <p class="text-base w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
          </li>

        </ul>
      </div>
    </section>
  </main>
</template>

<script>
export default {

}
</script>