*{
  margin: 0;
  padding: 0;
}

@font-face {
    font-family: Alata;
    src: url(../assets/fonts/Alata-Regular.ttf);
}
body {
  font-family: 'Alata';
}

:root {   
  /* font-family */
  --font-primary: 'Alata', sans-serif;


  /* Text Colors */
  --text-primary: #0795A1;
  --text-secondary: #666666;
  --text-tertiary: #161616;
  --text-quaternary: #4D4D4D;
  --text-strong: #000000;
  --text-muted: #DDDDDD;  
  --text-neutral: #8D8D8D;
  --text-inverse: #ffffff;
  --text-success: #16A34A;
  --text-danger:  #ef4444; 
  --text-warning: #8B6942;
  --text-info: #1E40AF;
  --text-accent-1: #09C2D2;
  --text-accent-2: #19E4F5;
  --text-accent-1-20: rgba(9, 194, 210, 0.20);
  --text-accent-2-20: rgba(25, 228, 245, 0.20);


  /* Background Colors */
  --bg-primary: #EAFDFF;
  --bg-secondary: #FFFFFF;
  --bg-accent-1: #0795A1; 
  --bg-accent-2: #09C2D2; 
  --bg-accent-3: #19E4F5;
  --bg-success: #DCFCE7;   
  --bg-danger:  #fbd6d6;
  --bg-warning:  #FEF9C3;
  --bg-info: #DBEAFE;
  --bg-muted: #E7E5EA;
  --bg-primary-gradient: linear-gradient(72deg, var(--bg-accent-1) 36.21%, var(--bg-accent-3) 111.54%);
  --bg-secondary-gradient: linear-gradient(135deg, var(--bg-secondary), #f0f0f0);

  /* Border */
  --border-primary: 1px solid #16D7E7;   
  --border-secondary:  1px solid #d4d4d4;
  --border-tertiary:  1px solid #ffffff;
  --border-muted: 1px solid rgba(196, 196, 216, 0.25);
  --border-light: 1px solid #E5E5E5;


  /* Shadows */
  --shadow-primary: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
  --shadow-secondary: 4px 12px 25px 0 rgba(180, 180, 180, 0.15);
  --shadow-tertiary: -14px 26px 56.32px 0 rgba(0, 0, 0, 0.10);

}