@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
@theme {
  /* COLORS */
  --color-figma-primarydark: rgba(8, 147, 184, 1);
  --color-figma-primarylight: rgba(1, 85, 129, 1);
  --color-figma-bglight: rgba(248, 248, 248, 1);
  --color-figma-bgdark: rgba(12, 25, 39, 1);
  --color-figma-foregrounddark: rgba(19, 37, 58, 1);
  --color-figma-cardbgdark: rgba(26, 52, 83, 1);
  --color-figma-cardbglight: rgba(235, 244, 255, 1);
  --color-figma-primarytextlight: rgba(8, 40, 68, 1);
  --color-figma-primarytextdark: rgba(240, 240, 240, 1);
  --color-figma-foregroundlight: rgba(2, 90, 133, 1);
  --color-figma-foregroundligh-opa: rgba(240, 247, 255, 0.1);
  --color-figma-cardborderlight: rgba(1, 85, 129, 0.5);
  --color-opawhite: rgba(255, 255, 255, 0.1);
  --color-darker-bg: #0c1927;
  --color-lighter-border: #d3e7fe;
  --color-light-overlay: rgba(247, 247, 247, 0.5);
  --color-light-overlay2: rgba(247, 247, 247, 0.8);
  --color-light-primarytext: rgba(53, 55, 57, 1);
  --color-light-secondarytext: rgba(78, 84, 90, 1);
  --color-dark-borderprimary: rgba(0, 125, 210, 1);
  --color-figma-mulish: rgba(216, 216, 216, 1);
  --custom-lightgray: rgba(211, 211, 211, 1);
  --color-cookie-opawhite: rgba(255, 255, 255, 0.7);

  /* BACKGROUNDS */
  --bg-header-dark-bg: url("/public/assets/images/background.png");
  --bg-header-light-bg: url("/public/assets/images/background-image.png");
  --bg-header-size: 100% 100%;
  --bg-radial: radial-gradient(
    50% 50% at 50% 50%,
    rgb(255, 61, 46) 0%,
    rgb(1, 85, 129) 100%
  );
  --bg-linear: linear-gradient(
    176.25deg,
    #007dd2 -55.84%,
    #1a3453 45.35%,
    #007dd2 146.54%
  );

  /* SHADOWS */
  --shadow-search: 0 4px 10px -4px rgba(0, 0, 0, 0.24);
  --shadow-search-box: 0px 4px 10px -4px rgba(46, 38, 61, 0.24);


  /* FONTS FAMILIES*/
  --font-poppins: "Poppins", sans-serif;
  --font-mulish: "Mulish", sans-serif;

  /* FONT SIZES */
  --text-size-64: 64px;
  --text-size-56: 56px;
  --text-size-44: 44px;
}

@layer utilities {
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .bg-linear {
    background: var(--bg-linear);
  }
   .text-lighter-border {
    color: var(--color-lighter-border);
  }
}