@import "tailwindcss";
@theme { 
    --font-work: "work-sans", "sans-serif";
}

textarea:focus,
input:focus {
	outline: none;
}

@theme inline {
	--color-bg-dark:#212121;
	--color-bg-light:#FFFFFF;
  --color-brand-gray:#201E1E;

    --color-text-light-900:#0A0A0A;
    --color-text-light-500:#939393;
    --color-text-light-200:#C0C0C0;
    --color-text-light-100:#FFFFFF;

    --color-text-dark-100:#F5F5F5;
    --color-text-dark-500:#E8E8E8;
    --color-text-dark-900:#ADADAD;

    --color-fill-900:#0A0A0A;
    --color-fill-800:#212121;
    --color-fill-700:#363636;
    --color-fill-400:#939393;
    --color-fill-300:#C0C0C0;
    --color-fill-200:#D6D6D6;
    --color-fill-150:#E8E8E8;
    --color-fill-100:#F5F5F5;

    --color-feedback-positive-900:#00CF1B;
    --color-feedback-positive-100:#CCF5D1;

    --color-feedback-negative-900:#FF514F;
    --color-feedback-negative-100:#FFDCDC;

    --color-feedback-attention-900:#FFBA00;
    --color-feedback-attention-100:#FFF1CC;

    --color-feedback-info-900:#386AFF;
    --color-feedback-info-100:#D7E1FF;
}

@layer theme {
    @font-face {
      font-family: "work-sans";
      src:
        url("/fonts/work-sans/WorkSans-Thin.woff2") format("woff2"),
        url("/fonts/work-sans/WorkSans-Thin.woff") format("woff");
      font-weight: 100;
      /* Thin */
      font-style: normal;
      font-display: swap;
    }
  
    @font-face {
      font-family: "work-sans";
      src:
        url("/fonts/work-sans/WorkSans-ExtraLight.woff2") format("woff2"),
        url("/fonts/work-sans/WorkSans-ExtraLight.woff") format("woff");
      font-weight: 200;
      /* ExtraLight */
      font-style: normal;
      font-display: swap;
    }
  
    @font-face {
      font-family: "work-sans";
      src:
        url("/fonts/work-sans/WorkSans-Light.woff2") format("woff2"),
        url("/fonts/work-sans/WorkSans-Light.woff") format("woff");
      font-weight: 300;
      /* Light */
      font-style: normal;
      font-display: swap;
    }
  
    @font-face {
      font-family: "work-sans";
      src:
        url("/fonts/work-sans/WorkSans-Regular.woff2") format("woff2"),
        url("/fonts/work-sans/WorkSans-Regular.woff") format("woff");
      font-weight: 400;
      /* Regular */
      font-style: normal;
      font-display: swap;
    }
  
    @font-face {
      font-family: "work-sans";
      src:
        url("/fonts/work-sans/WorkSans-Medium.woff2") format("woff2"),
        url("/fonts/work-sans/WorkSans-Medium.woff") format("woff");
      font-weight: 500;
      /* Medium */
      font-style: normal;
      font-display: swap;
    }
  
    @font-face {
      font-family: "work-sans";
      src:
        url("/fonts/work-sans/WorkSans-SemiBold.woff2") format("woff2"),
        url("/fonts/work-sans/WorkSans-SemiBold.woff") format("woff");
      font-weight: 600;
      /* SemiBold */
      font-style: normal;
      font-display: swap;
    }
  
    @font-face {
      font-family: "work-sans";
      src:
        url("/fonts/work-sans/WorkSans-Bold.woff2") format("woff2"),
        url("/fonts/work-sans/WorkSans-Bold.woff") format("woff");
      font-weight: 700;
      /* Bold */
      font-style: normal;
      font-display: swap;
    }
  
    @font-face {
      font-family: "work-sans";
      src:
        url("/fonts/work-sans/WorkSans-ExtraBold.woff2") format("woff2"),
        url("/fonts/work-sans/WorkSans-ExtraBold.woff") format("woff");
      font-weight: 800;
      /* ExtraBold */
      font-style: normal;
      font-display: swap;
    }
  
    @font-face {
      font-family: "work-sans";
      src:
        url("/fonts/work-sans/WorkSans-Black.woff2") format("woff2"),
        url("/fonts/work-sans/WorkSans-Black.woff") format("woff");
      font-weight: 900;
      /* Black */
      font-style: normal;
      font-display: swap;
    }
  }


  @keyframes toast-progress {
    from {
      width: 90%;
    }
  
    to {
      width: 0%;
    }
  }
  
  .toast-progress-animation {
    animation: toast-progress 5s linear forwards;
  }

  .custom-wrapper { 
    height: 100%;
  }

  .custom-layout {
    height: 100%;
  }

  .custom-file-explorer .custom-file-explorer-list {
    height: 100%;
    overflow: visible;
  }