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

@layer base {
  html[data-theme="demo-chrono"] {
    --color-primary: rgb(49 46 129 / var(--tw-bg-opacity, 1)); /*indigo-900*/
    --color-primary-light: rgb(55 48 163 / var(--tw-bg-opacity, 1)); /*indigo-800*/
    --color-primary-darker: rgb(30 27 75 / var(--tw-bg-opacity, 1)); /*indigo-950*/
    --color-primary-lighter: rgb(165 180 252 / var(--tw-bg-opacity, 1)); /*indigo-300*/
    --color-primary-max-light: rgb(224 231 255 / var(--tw-bg-opacity, 1)); /*indigo-100*/
    --common-border-radius: 0.375rem; /*rounded-md*/
    @apply font-demo-chrono;
  }
  
  html[data-theme="demo-chrono"] .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="demo-chrono"] .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="demo-chrono"] .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="demo-chrono"] header#main-header {
    @apply w-full fixed z-50 bg-white font-demo-chrono top-0;
  }
  
  html[data-theme="demo-chrono"] header nav {
    @apply flex items-center justify-between gap-x-4 p-2;
  }
  
  html[data-theme="demo-chrono"] #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 font-demo-chrono;
  }

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

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

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