@import url("./styles/colors.css");
@import url("./styles/spacing.css");
@import url("./styles/typography.css");
@import url("./styles/layouts.css");
@import url("./styles/utils.css");

/**
* @license
*
* Font Family: Satoshi
* Designed by: Deni Anggara
* URL: https://www.fontshare.com/fonts/satoshi
* © 2024 Indian Type Foundry
*
* Satoshi Light 
* Satoshi LightItalic 
* Satoshi Regular 
* Satoshi Italic 
* Satoshi Medium 
* Satoshi MediumItalic 
* Satoshi Bold 
* Satoshi BoldItalic 
* Satoshi Black 
* Satoshi BlackItalic 
* Satoshi Variable (Variable font)
* Satoshi VariableItalic (Variable font)

*
*/

@font-face {
  font-family: "Satoshi";
  src: url("/fonts/Satoshi-Light.woff2") format("woff2"),
    url("./fonts/Satoshi-Light.woff") format("woff"),
    url("./fonts/Satoshi-Light.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Satoshi";
  src: url("./fonts/Satoshi-LightItalic.woff2") format("woff2"),
    url("./fonts/Satoshi-LightItalic.woff") format("woff"),
    url("./fonts/Satoshi-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: "Satoshi";
  src: url("./fonts/Satoshi-Regular.woff2") format("woff2"),
    url("./fonts/Satoshi-Regular.woff") format("woff"),
    url("./fonts/Satoshi-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Satoshi";
  src: url("./fonts/Satoshi-Italic.woff2") format("woff2"),
    url("./fonts/Satoshi-Italic.woff") format("woff"),
    url("./fonts/Satoshi-Italic.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: "Satoshi";
  src: url("./fonts/Satoshi-Medium.woff2") format("woff2"),
    url("./fonts/Satoshi-Medium.woff") format("woff"),
    url("./fonts/Satoshi-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Satoshi";
  src: url("./fonts/Satoshi-MediumItalic.woff2") format("woff2"),
    url("./fonts/Satoshi-MediumItalic.woff") format("woff"),
    url("./fonts/Satoshi-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: "Satoshi";
  src: url("./fonts/Satoshi-Bold.woff2") format("woff2"),
    url("./fonts/Satoshi-Bold.woff") format("woff"),
    url("./fonts/Satoshi-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Satoshi";
  src: url("./fonts/Satoshi-BoldItalic.woff2") format("woff2"),
    url("./fonts/Satoshi-BoldItalic.woff") format("woff"),
    url("./fonts/Satoshi-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: "Satoshi";
  src: url("./fonts/Satoshi-Black.woff2") format("woff2"),
    url("./fonts/Satoshi-Black.woff") format("woff"),
    url("./fonts/Satoshi-Black.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Satoshi";
  src: url("./fonts/Satoshi-BlackItalic.woff2") format("woff2"),
    url("./fonts/Satoshi-BlackItalic.woff") format("woff"),
    url("./fonts/Satoshi-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
  font-style: italic;
}
/**
* This is a variable font
* You can control variable axes as shown below:
* font-variation-settings: wght 900.0;
*
* available axes:
'wght' (range from 300.0 to 900.0
*/
@font-face {
  font-family: "Satoshi";
  src: url("./fonts/Satoshi-Variable.woff2") format("woff2"),
    url("./fonts/Satoshi-Variable.woff") format("woff"),
    url("./fonts/Satoshi-Variable.ttf") format("truetype");
  font-weight: 300 900;
  font-display: swap;
  font-style: normal;
}
/**
* This is a variable font
* You can control variable axes as shown below:
* font-variation-settings: wght 900.0;
*
* available axes:
'wght' (range from 300.0 to 900.0
*/
@font-face {
  font-family: "Satoshi";
  src: url("./fonts/Satoshi-VariableItalic.woff2") format("woff2"),
    url("./fonts/Satoshi-VariableItalic.woff") format("woff"),
    url("./fonts/Satoshi-VariableItalic.ttf") format("truetype");
  font-weight: 300 900;
  font-display: swap;
  font-style: italic;
}

/* Root Variables */
:root {
  /*  Colors */
  --primary-color: #007639;
  --body-text: #475569;
  --border: #f0f0f0;
  --black: #1e1e1e;
  --white: #fff;
  --charcoal: #1f1f1f;
  --bg-black: #111;

  /* clr series */
  --clr-1: #711710;
  --clr-2: #f8f8f8;
  --clr-3: #f9f9fb;
  --clr-4: #f4f6f5;
  --clr-5: #262c28;
  --clr-6: #208b3a;
  --clr-7: #f1fcf3;
  --clr-8: #dff9e5;

  /* neutrals */
  --neutral-1: #a9a9a9;
  --neutral-2: #e9ecea;
  --neutral-3: #d3d9d5;
  --neutral-4: #87978d;
  --neutral-5: #48594d;
  --neutral-6: #3c4940;
  --neutral-7: #768b7b;
  --neutral-8: #333c37;
  --neutral-9: #4c5750;
  --neutral-10: #5c7062;

  /* RgbaF colors */
  --rgba-1: rgba(0, 118, 57, 0.1);

  /* Indicators Colors */
  --success-text: #027a48;
  --success-main: #039855;
  --success-border: #c0e5dd;
  --success-bg: #ecfdf3;
  --yellow: #e9cf0c;

  /* Graph colors */
  --graph-clr-1: #e31b53;
  --graph-clr-2: #5fad56;
  --graph-clr-3: #b4436c;
  --graph-clr-4: #f78154;
  --graph-clr-5: #4d9078;

  /* Spacing */
  --space-0: 0;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;

  /* Fonts */
  --font-primary: "Satoshi", sans-serif;

  /* font sizes -- */
  /* font sizes in rem -- */
  --font-10: 0.625rem; /* 10px ÷ 16 */
  --font-12: 0.75rem; /* 12px ÷ 16 */
  --font-14: 0.875rem; /* 14px ÷ 16 */
  --font-16: 1rem; /* 16px ÷ 16 */
  --font-18: 1.125rem; /* 18px ÷ 16 */
  --font-20: 1.25rem; /* 20px ÷ 16 */
  --font-21: 1.3125rem; /* 21px ÷ 16 */
  --font-22: 1.375rem; /* 22px ÷ 16 */
  --font-24: 1.5rem; /* 24px ÷ 16 */
  --font-30: 1.875rem; /* 30px ÷ 16 */
  --font-32: 2rem; /* 32px ÷ 16 */
  --font-40: 2.5rem; /* 40px ÷ 16 */
  --font-48: 3rem; /* 48px ÷ 16 */
  --font-50: 3.125rem; /* 50px ÷ 16 */
  --font-62: 3.875rem; /* 62px ÷ 16 */

  /* Border Radius */
  --radius-none: 0;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-8: 12px;
  --radius-16: 16px;
  --radius-32: 32px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-1: 0px 17px 17px 0px rgba(0, 0, 0, 0.1);
  --shadow-2: 0px 2px 8px -2px rgba(23, 23, 23, 0.1);
  --shadow-3: 0px 4px 8px -2px rgba(76, 87, 80, 0.1),
    0px 2px 4px -2px rgba(76, 87, 80, 0.06);
  --shadow-4: 0px 2px 4px 0px rgba(23, 23, 23, 0.04);
  --shadow-5: 0px 4px 8px -2px rgba(23, 23, 23, 0.1),
    0px 2px 4px -2px rgba(23, 23, 23, 0.06);
  --shadow-md: 0px 4px 8px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0px 8px 16px rgba(0, 0, 0, 0.3);

  /* Z-index */
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-50: 50;
  --z-100: 100;

  /* Transition */
  --transition-fast: 0.2s ease-in-out;
  --transition-normal: 0.4s ease-in-out;

  /* Widths */
  --container-width: 1440px;
  --container-padding: 16px;
}

/* Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-md);
  color: var(--neutral-heading);
  background-color: var(--neutral-bg-alt);
}

/* login background */

.login-bg {
    background-image: url("../assets/images/login-bg.svg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
}

.footer-backdrop {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
}