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

@layer components {
  .navbar-container {
    @apply flex flex-wrap items-center w-full ease-in duration-300 justify-between h-[60px] color-bg-surface-default sm:h-[72px] px-6 sm:px-8 border-b-[1.5px] color-border-default;
  }
  .section-block {
    @apply color-bg-surface-default border color-border-default rounded-[5px] p-4;
  }

  .typography-title-1000 {
    @apply text-[3rem] leading-[3.5rem] font-bold;
  }
  .typography-title-900 {
    @apply text-[2.5rem] leading-[3rem] font-bold;
  }
  .typography-title-800 {
    @apply text-[2rem] leading-[2.5rem] font-bold;
  }
  .typography-title-700 {
    @apply text-[1.5rem] leading-[2rem] font-bold;
  }
  .typography-sub-title-1000 {
    @apply text-[1.5rem] leading-[2rem] font-semibold;
  }
  .typography-sub-title-950 {
    @apply text-[1.25rem] leading-[2rem] font-semibold;
  }
  .typography-sub-title-900 {
    @apply text-[1rem] leading-[1.5rem] font-semibold;
  }
  .typography-sub-title-800 {
    @apply text-[0.875rem] leading-[1.25rem] font-semibold;
  }
  .typography-button-1000 {
    @apply text-[1rem] leading-[1.5rem] font-bold;
  }
  .typography-button-900 {
    @apply text-[0.875rem] leading-[1.25rem] font-bold;
  }
  .typography-button-800 {
    @apply text-[0.75rem] leading-[1rem] font-bold;
  }
  .typography-body-1000 {
    @apply text-[1rem] leading-[1.5rem] font-medium;
  }
  .typography-body-900 {
    @apply text-[0.875rem] leading-[1.25rem] font-medium;
  }
  .typography-body-800 {
    @apply text-[0.75rem] leading-[1rem] font-medium;
  }
  .typography-label-1000 {
    @apply text-[1rem] leading-[1.5rem] font-normal;
  }
  .typography-label-900 {
    @apply text-[0.875rem] leading-[1.25rem] font-normal;
  }
  .typography-label-800 {
    @apply text-[0.75rem] leading-[1rem] font-normal;
  }

  .color-bg-surface-harder {
    @apply bg-purple-100;
  }
  .color-bg-surface-hard {
    @apply bg-gray-200;
  }
  .color-bg-surface-default {
    @apply bg-gray-100;
  }

  .color-bg-fill-highlight {
    @apply bg-purple-600;
  }
  .color-bg-fill-highlight-hover {
    @apply bg-purple-700;
  }
  .color-bg-fill-hard {
    @apply bg-purple-100;
  }
  .color-bg-fill-default {
    @apply bg-gray-200;
  }
  .color-bg-fill-soft {
    @apply bg-gray-100;
  }

  .color-bg-feedback-success-default {
    @apply bg-green-200;
  }
  .color-bg-feedback-success-harder {
    @apply bg-green-500;
  }
  .color-bg-feedback-neutral {
    @apply bg-gray-200;
  }

  .color-bg-feedback-danger-default {
    @apply bg-red-100;
  }
  .color-bg-feedback-danger-hard {
    @apply bg-red-500;
  }
  .color-bg-feedback-info-default {
    @apply bg-blue-100;
  }
  .color-bg-feedback-another-info-default {
    @apply bg-gray-200;
  }

  .color-fg-highlight {
    @apply text-purple-600;
  }
  .color-fg-hard {
    @apply text-gray-1200;
  }
  .color-fg-default {
    @apply text-gray-1000;
  }
  .color-fg-soft {
    @apply text-gray-800;
  }
  .color-fg-extra-soft {
    @apply text-gray-400;
  }
  .color-fg-inverse {
    @apply text-gray-100;
  }

  .color-fg-feedback-success {
    @apply text-green-500;
  }

  .color-fg-feedback-danger {
    @apply text-red-500;
  }
  .color-fg-feedback-info {
    @apply text-blue-500;
  }
  .color-fg-feedback-neutral {
    @apply text-gray-900;
  }
  .color-border-highlight {
    @apply border-purple-600;
  }
  .color-border-harder {
    @apply border-purple-300;
  }
  .color-border-hard {
    @apply border-gray-500;
  }
  .color-border-default {
    @apply border-gray-300;
  }
  .color-border-feedback-success-default {
    @apply border-green-300;
  }
  .color-border-feedback-success-harder {
    @apply border-green-500;
  }
  .color-border-feedback-danger-default {
    @apply border-red-200;
  }
  .color-border-feedback-danger-hard {
    @apply border-red-500;
  }
  .color-border-feedback-info {
    @apply border-blue-600;
  }
  .color-border-feedback-neutral {
    @apply border-gray-900;
  }
  .button-menu-default-md {
    @apply inline-flex items-center justify-start typography-body-900 gap-3 px-3 h-[45px] color-fg-soft border border-transparent rounded-md active:color-bg-fill-hard active:color-border-harder active:color-fg-highlight focus:color-bg-fill-hard focus:color-border-harder focus:color-fg-highlight hover:color-bg-fill-hard;
  }
  .button-menu-default-md svg {
    @apply stroke-1.04 w-5 h-5 shrink-0;
  }
  .button-menu-default-md-icon-only {
    @apply flex items-center justify-center gap-3 h-10 w-10 color-fg-soft border border-transparent rounded-md active:color-bg-fill-hard active:color-border-harder active:color-fg-highlight focus:color-bg-fill-hard focus:color-border-harder focus:color-fg-highlight hover:color-bg-fill-hard;
  }
  .button-menu-default-md-icon-only svg {
    @apply stroke-1.04 w-5 h-5;
  }
  .button-menu-default-selected-md {
    @apply inline-flex items-center justify-start typography-body-900 gap-3 px-3 h-[45px] border rounded-md color-bg-fill-hard color-border-harder color-fg-highlight;
  }
  .button-menu-default-selected-md svg {
    @apply stroke-1.04 w-5 h-5 shrink-0;
  }
  .button-menu-default-selected-md-icon-only {
    @apply flex items-center justify-center gap-3 h-10 w-10 border rounded-md color-bg-fill-hard color-border-harder color-fg-highlight;
  }
  .button-menu-default-selected-md-icon-only svg {
    @apply stroke-1.04 w-5 h-5;
  }
  .button-default-blank-secondary-icon-only-md {
    @apply flex items-center justify-center rounded color-fg-soft w-10 h-10 hover:color-fg-default hover:color-bg-fill-default shrink-0 cursor-pointer;
  }
  .button-default-blank-secondary-icon-only-md svg {
    @apply stroke-1.25 w-5 h-5;
  }
  .button-default-blank-secondary-icon-only-sm {
    @apply flex items-center justify-center rounded color-fg-soft w-8 h-8 hover:color-fg-default hover:color-bg-fill-default shrink-0 cursor-pointer;
  }
  .button-default-blank-secondary-icon-only-sm svg {
    @apply stroke-1.25 w-5 h-5;
  }
  .button-default-blank-secondary-md {
    @apply inline-flex gap-2 items-center typography-body-1000 rounded color-fg-soft h-10 px-3 hover:color-fg-default hover:color-bg-fill-default shrink-0 cursor-pointer;
  }
  .button-default-blank-secondary-md svg {
    @apply stroke-1.25 w-5 h-5;
  }
  .button-default-blank-secondary-sm {
    @apply inline-flex gap-2 items-center typography-body-900 rounded color-fg-soft h-8 px-3 hover:color-fg-default hover:color-bg-fill-default shrink-0 cursor-pointer;
  }
  .button-default-blank-secondary-sm svg {
    @apply stroke-1.25 w-4 h-4;
  }
  .button-default-outline-secondary-md-icon-only-md {
    @apply flex items-center justify-center border color-border-default rounded color-fg-soft w-10 h-10 hover:color-bg-fill-default shrink-0 cursor-pointer;
  }
  .button-default-outline-secondary-md-icon-only-md svg {
    @apply stroke-1.25 w-5 h-5;
  }
  .button-default-outline-secondary-sm {
    @apply inline-flex gap-2 items-center border color-border-default typography-body-900 rounded color-fg-soft h-8 px-3 hover:color-bg-fill-default shrink-0 cursor-pointer;
  }
  .button-default-outline-secondary-sm svg {
    @apply stroke-1.25 w-4 h-4;
  }
  .button-default-fill-primary-icon-only-md {
    @apply flex items-center justify-center rounded color-fg-inverse color-bg-fill-highlight w-10 h-10 hover:color-bg-fill-highlight-hover shrink-0 cursor-pointer;
  }
  .button-default-fill-primary-icon-only-md svg {
    @apply stroke-1.25 w-5 h-5;
  }
  .button-default-fill-primary-md {
    @apply inline-flex gap-2 items-center typography-body-1000 rounded color-fg-inverse color-bg-fill-highlight h-12 px-3 hover:color-bg-fill-highlight-hover shrink-0 cursor-pointer;
  }
  .button-default-fill-primary-md svg {
    @apply stroke-1.25 w-5 h-5;
  }
  .button-default-fill-primary-md {
    @apply inline-flex gap-2 items-center typography-body-1000 rounded color-fg-inverse color-bg-fill-highlight h-10 px-3 hover:color-bg-fill-highlight-hover shrink-0 cursor-pointer;
  }
  .button-default-fill-primary-md svg {
    @apply stroke-1.25 w-5 h-5;
  }
  [class*="button-default"][disabled] {
    @apply cursor-not-allowed opacity-50;
  }
  .button-default-fill-primary-icon-only-sm {
    @apply flex items-center justify-center rounded color-fg-inverse color-bg-fill-highlight w-8 h-8 hover:color-bg-fill-highlight-hover shrink-0 cursor-pointer;
  }
  .button-default-fill-primary-icon-only-sm svg {
    @apply stroke-1.25 w-5 h-5;
  }
  .button-default-fill-primary-sm {
    @apply inline-flex gap-2 items-center typography-body-900 rounded color-fg-inverse color-bg-fill-highlight h-8 px-3 hover:color-bg-fill-highlight-hover shrink-0 cursor-pointer;
  }
  .button-default-fill-primary-sm svg {
    @apply stroke-1.25 w-4 h-4;
  }
  .button-default-fill-secondary-icon-only-sm {
    @apply flex items-center justify-center rounded color-fg-soft color-bg-fill-default border-[1.5px] border-transparent w-8 h-8 hover:color-bg-fill-hard hover:color-border-harder hover:color-fg-highlight shrink-0 cursor-pointer;
  }
  .button-default-fill-secondary-icon-only-sm svg {
    @apply stroke-1.25 w-5 h-5;
  }
  .button-default-fill-secondary-sm {
    @apply inline-flex gap-2 items-center typography-body-900 rounded color-fg-soft color-bg-fill-default border-[1.5px] border-transparent h-8 px-3 hover:color-bg-fill-hard hover:color-border-harder hover:color-fg-highlight shrink-0 cursor-pointer;
  }
  .button-default-fill-secondary-sm svg {
    @apply stroke-1.25 w-4 h-4;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

 @font-face {
  font-family: 'Nunito';
  font-style: normal;
  src: url(/assets/fonts/Nunito/Nunito-Regular.ttf) format('truetype');
  font-weight: 400;
}

 @font-face {
  font-family: 'Nunito';
  font-style: normal;
  src: url(/assets/fonts/Nunito/Nunito-SemiBold.ttf) format('truetype');
  font-weight: 600;
}