@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html[data-theme="lnc"] {
    --color-primary: #1061a4;
    --color-primary-light: #157cd1;
    --color-primary-darker: #0b4574;
    --color-primary-lighter: #d1e8fa;
    --color-primary-max-light: #e8f3fd;
    --common-border-radius: 0.375rem; /*rounded-md*/
    /* @apply font-lnc */
  }

  html[data-theme="lnc"] .submit-button {
    @apply my-2 font-semibold text-sm text-center text-white rounded-common hover:cursor-pointer px-4 py-2;
  }

  html[data-theme="lnc"] .button {
    @apply font-semibold text-sm text-center text-white bg-primary rounded-common hover:bg-primary-light hover:cursor-pointer px-4 py-2;
  }

  html[data-theme="lnc"] .outline-button {
    @apply font-semibold text-sm text-center border-2 border-primary text-primary rounded-common hover:bg-primary hover:text-white hover:cursor-pointer px-4 py-2;
  }

  html[data-theme="lnc"] header {
    @apply w-full fixed z-50 bg-white lg:p-4;
  }

  html[data-theme="lnc"] header nav {
    @apply flex items-center justify-between gap-x-4 p-2;
  }

  html[data-theme="lnc"] #main {
    @apply max-w-screen-xl mx-auto bg-white px-2 py-16 lg:p-16 min-h-screen mt-4 lg:mt-0;
  }

  html[data-theme="lnc"] #main-root {
    @apply xl:w-3/4 mx-auto px-2 lg:px-16 min-h-screen;
  }

  html[data-theme="lnc"] #event-website {
    @apply mb-auto bg-white px-0 py-12;
  }

  html[data-theme="lnc"] #page-title {
    @apply text-3xl font-semibold my-2 sm:my-8;
  }

  .bg-red-championship {
    background-color: #ae0011;
  }
}