@use './tailwind.css';

@font-face {
  font-family: 'Forma DJR Text';
  src: local('Forma DJR Text'), local('FormaDJRText-Regular'),
    url("https://content.frollo.us/fonts/FormaDJRText-Regular.otf") format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Forma DJR Text';
  src: local('Forma DJR Text Italic'),
    url('https://content.frollo.us/fonts/FormaDJRText-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Forma DJR Text';
  src: local('Forma DJR Text Bold'),
    url('https://content.frollo.us/fonts/FormaDJRText-Medium.otf') format('opentype');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Forma DJR Text';
  src: local('Forma DJR Text Bold'),
    url('https://content.frollo.us/fonts/FormaDJRText-Medium.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* 
* Default theme variables - Frollo branding
*/
:root {
  --colorPrimary: #512ABD;
    --colorSecondary: #141414;
    --colorTertiary: #fff;
    --fontFamily: Forma DJR Text;
    --fontUrl: local-font;
    --colorLink: #512ABD;
    --colorBody: #141414;
    --colorButtonPrimary: #512ABD;
    --colorButtonPrimaryText: #ffffff;
    --colorButtonPrimaryFade: #854cff;
    --colorButtonSecondary: #E6E1FF;
    --colorButtonSecondaryText: #141414;
    --colorButtonSecondaryFade: #CDC3FF;
    --colorButtonTertiary: #512ABD;
    --colorButtonTertiaryText: #512ABD;
    --colorButtonTertiaryFade: #f5f3ff;
    --colorButtonQuaternary: #CDC3FF;
    --colorButtonQuaternaryText: #292B3D;
    --colorButtonQuaternaryFade: transparent;
    --colorAppBg: #F7F7F7;
    --colorSuccessBg: #D8FFF6;
    --colorSuccessText: #00C696;
    --colorSuccessNew: #4bf0c8;
    --colorErrorBg: #FEE0D9;
    --colorErrorText: #E74C4C;
    --colorWarningBg: #FB6340;
    --colorWarningText: #FB6340;
    --colorText1: #393C56;
    --colorText2: #5F6489;
    --colorText3: #8B8FAC;
    --colorText4: #CDC3FF;
    --colorBg1: #292B3D;
    --colorBg2: #FDDBFD;
    --colorBg3: #FEE0D9;
    --colorBg4: #D4EDF7;
    --colorBorder1: #AFB2C7;
    --colorBorder2: #CDC3FF;
    --colorBorder3: #8E7DFF;
    --colorButtonGradient: linear-gradient(87.77deg, #d327e7, #512abd 23.8%, #512abd 42.37%, #00d19f);
    --colorButtonGradientText: #f7f7f7;
}

body {
  font-family: var(--fontFamily);
  @apply text-base text-body bg-brand-appBg relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}