/**
 * Reset
 *
 * We are using normalize.css as a CSS reset.
 */

/**
 * Variables
 *
 * We are using Bootstrap so we can override their variables.
 * This will not update the bootstrap css though, so we need
 * to create some specific overrides.
 *
 * https://getbootstrap.com/docs/5.3/customize/css-variables/
 */

:root {
  /* Aryza Variables */
  --az-colour-primary: #2e32ae;
  --az-colour-primary-dark: #1d2372;
  --az-colour-primary-darker: #151a52;
  --az-colour-primary-light: #4c60f2;
  --az-colour-white: #ffffff;
  --az-colour-black: #000000;
  --az-colour-gray: #6C757D;
  --az-colour-gray-dark: #212529;
  --az-colour-gray-light: #DEE2E6;
  --az-colour-gray-lighter: #F8F9FB;
  --az-colour-indigo: #D3D6F4;
  --az-colour-indigo-dark: #646DD8;
  --az-colour-error: #C0362D;
  --az-colour-error-dark: #601B16;
  --az-colour-error-light: #F68F88;
  --az-colour-error-lighter: #FEF3F2;
  --az-colour-success: #189e26;
  --az-colour-success-dark: #024b09;
  --az-colour-success-light: #92e199;
  --az-colour-success-lighter: #e0f9e2;
  --az-colour-warning: #eab300;
  --az-colour-warning-dark: #9c7a09;
  --az-colour-warning-light: #f7e6ac;
  --az-colour-warning-lighter: #fffaee;
  --az-colour-trasparent: rgba(0, 0, 0, 0);
  --az-grid-gap: 16px;
  --az-grid-gap-close: 8px;
  --az-font-weight-normal: 400;
  --az-font-weight-semi-bold: 500;
  --az-font-weight-bold: 700;
  --az-border-radius: 8px;
  --az-border-radius-lg: 12px;
  --az-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

  /* Bootstrap Overrides */
  --bs-primary: var(--az-colour-primary);
  --bs-gray: var(--az-colour-gray);
  --bs-gray-dark: var(--az-colour-gray-dark);
}

/**
 * Breakpoints
 *
 * For reference as we cannot use css variable in the 
 * @media rules.
 *
 * xs: 0;
 * sm: 576px;
 * md: 768px;
 * lg: 1024px;
 * xl: 1366px;
 * xxl: 1920px;
 */

/* Base Setup */

*,
*:before,
*:after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  /* 1rem = 10px */
  font-size: 62.5%;
}

body {
  font-family: Poppins, sans-serif;
  line-height: 1.5;
  color: var(--az-colour-gray-dark);
  -webkit-font-smoothing: antialiased;
}

html,
body,
#root {
  height: 100vh;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

p, h1, h2, h3, h4, h5, h6 {
  font-family: Poppins, sans-serif;
  overflow-wrap: break-word;
  margin: 0;
}

p {
  font-size: 1.5rem;
  text-wrap: pretty;
  color: var(--az-colour-gray);
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  font-weight: var(--az-font-weight-bold);
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 1.8rem;
}

h4 {
  font-size: 1.6rem;
}

h5 {
  font-size: 1.6rem;
}

h6 {
  font-size: 1.2rem;
}

a {
  text-decoration: none;
}

/* Forms and Inputs */

label {
  font-size: 1.4rem;
  font-weight: var(--az-font-weight-semi-bold);
  color: var(--az-colour-gray);
}

input, button, textarea, select {
  font: inherit;

  &::placeholder {
    font-size: 1.4rem;
    color: var(--az-colour-gray);
  }
}

input,
textarea,
select {
  &:disabled {
    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus,
    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus,
    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus {
      -webkit-text-fill-color: var(--az-colour-gray);
    }
  }

  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus,
  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus,
  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--az-colour-gray);
    -webkit-box-shadow: 0 0 0px 1000px var(--az-colour-trasparent) inset;
    box-shadow: 0 0 0px 1000px var(--az-colour-trasparent) inset;
    transition: background-color 5000s ease-in-out 0s;
  }
  
  &:-internal-autofill-selected {
    background-color: var(--az-colour-trasparent) !important;
  }
}

input::-ms-clear,
input::-ms-reveal {
  display: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}