@import "reset.less";

.factor-app {
  --color-primary: #fa5855; // 500 old: #FA5855
  --color-primary-dark: #e14f4d; // 600 old: #da524f
  --color-primary-darker: #963533; // 700 old: #bc4947

  --color-text: #111010;
  --color-text-light: #f7f7f7;
  --color-placeholder: #bdcad4;
  --color-placeholder-2: #eeeef1;

  --color-bg: #fff;
  --color-bg-alt: #f3f5fb;
  --color-bg-alt-dark: #efdcd8;
  --color-bg-dark: #110d47;

  --font-family-primary: "Work Sans",
    /* Safari for OS X and iOS (San Francisco)*/ -apple-system,
    /* Chrome < 56 for OS X (San Francisco)*/ BlinkMacSystemFont, /* Windows*/ "Segoe UI",
    /* Android*/ "Roboto", /* Basic web fallback*/ "Helvetica Neue", Arial, sans-serif;

  /* Ultra Theme Variables */
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --input-bg: #fff;

  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-family-primary);
  font-size: 16px;
  line-height: 1.5;
  font-weight: var(--font-weight-normal);
  scroll-behavior: smooth;

  a:hover{
    opacity: 1;
  }

  input[type=email], 
  input[type=password], 
  input[type=search], 
  input[type=tel],
  input[type=text],
  select, textarea{
    box-shadow: none;
  }


  strong {
    font-weight: var(--font-weight-bold);
  }

  .btn {
    display: inline-block;
    line-height: 1;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    transition: 0.29s cubic-bezier(0.52, 0.01, 0.16, 1);
    border-radius: 0.25rem;
    box-sizing: border-box;
  }

  // Colors
  .text-white,
  .hover\:text-white:hover {
    color: #fff;
  }

  .text-red-100,
  .hover\:text-red-100:hover {
    color: #ffeeee;
  }
  .text-red-200,
  .hover\:text-red-200:hover {
    color: #fed5d5;
  }
  .text-red-300,
  .hover\:text-red-300:hover {
    color: #fdbcbb;
  }
  .text-red-400,
  .hover\:text-red-400:hover {
    color: #fc8a88;
  }
  .text-red-500,
  .hover\:text-red-500:hover {
    color: var(--color-primary);
  }
  .text-red-600,
  .hover\:text-red-600:hover {
    color: var(--color-primary-dark);
  }
  .text-red-700,
  .hover\:text-red-700:hover {
    color: var(--color-primary-darker);
  }
  .text-red-800,
  .hover\:text-red-800:hover {
    color: #712826;
  }
  .text-red-900,
  .hover\:text-red-900:hover {
    color: #110d47;
  }

  .text-gray-100,
  .hover\:text-gray-100:hover {
    color: #f6f6f6;
  }
  .text-gray-600,
  .hover\:text-gray-600:hover {
    color: #929292;
  }
  .text-gray-700,
  .hover\:text-gray-700:hover {
    color: #616161;
  }

  // Backgrounds
  .bg-white,
  .hover\:bg-white:hover {
    background-color: #fff;
  }
  .bg-red-500,
  .hover\:bg-red-500:hover {
    background-color: var(--color-primary);
  }
  .bg-red-600,
  .hover\:bg-red-600:hover {
    background-color: var(--color-primary-dark);
  }
  .bg-red-700,
  .hover\:bg-red-700:hover {
    background-color: var(--color-primary-darker);
  }

  .bg-gray-100,
  .hover\:bg-gray-100:hover {
    background-color: #f6f6f6;
  }

  // Utilities
  .text-left {
    text-align: left;
  }
  .text-center {
    text-align: center;
  }
  .text-right {
    text-align: right;
  }
  .text-sm {
    font-size: 0.875rem;
  }
  .border {
    border-width: 1px !important;
  }
  .border-solid {
    border-style: solid;
  }
  .border-white {
    border-color: #fff;
  }
  .rounded-sm {
    border-radius: 0.125rem;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-lg {
    border-radius: 0.5rem;
  }
  .rounded-full {
    border-radius: 9999px;
  }
  .shadow {
    box-shadow: 0 3px 30px rgba(0, 0, 0, 0.15), 0 5px 5px rgba(0, 0, 0, 0.05);
  }
}