/*===== VARIABLES CSS =====*/
:root {
  --header-height: 3.2rem;
  --hue: 152;
  --tran: hsla(152, 4%, 4%, .2);
  --syad: rgba(3,74,40,.10);
  --syat: rgba(3,74,40,.50);
  --syam: rgba(0,0,0,.1);
  --tem-color: #7ce046;
  

  /*========== Colors ========== A6A6A6*/
  --first-color: #00E77F;
  --first-color-alt: #00e755;
  --tema-color:#487ea8;
  --title-color: #393939;
  --text-color: #707070;
  --text-color-light: rgba(116,116,116,0.2);
  --text-color-light-hover: rgba(116,116,116,0.5);
  --body-color: #F5F5F5;
  --body-color-store: #F5F5F5;
  --drack-color: rgba(245, 245, 245,0.93);
  --container-color: #FFFFFF;
  --harga-color: #E68900;

  /*========== Font and typography ==========*/
  --body-font: 'Poppins', sans-serif;
  --biggest-font-size: 4rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;

  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== Margenes ==========*/
  --mb-1: .5rem;
  --mb-2: 1rem;
  --mb-3: 1.5rem;
  --mb-4: 2rem;
  --mb-5: 2.5rem;
  --mb-6: 3rem;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
  --text-subtitle: #606060;
}

body.dark-theme{
  --text-subtitle: #ffffff;
  --title-color: #FFFFFF;
  --text-color: #C7D1CC;
  --body-color: #0C151D;
  --body-color-store: #0F172A;
  --drack-color: rgba(18, 30, 41,0.93);
  --syat: rgba(255, 255, 255, 0.5);
  --tran: hsla(152, 4%, 50%, .2);
  --syad: hsla(152, 4%, 60%, .2);
  --syam: hsla(152, 4%, 60%, .2);
  --container-color: #1F2227;
  --hue: 180;
  --tem-color: #FFF;
}

/*========== Variables Dark theme ========== rgba(255,255,255,0.9);rgba(29,37,33,0.9); rgba(12,21,29,0.9);#0C151D; 12,21,29*/