@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap");

/*===========================
  COMMON css (YELLOW VARIANT)
===========================*/
:root {
  --font-family: "Inter", sans-serif;

  --primary: #f4c430;
  --primary-dark: #d1a514;
  --primary-light: #fdf6df;

  --accent: #f7b731;
  --accent-dark: #e0a800;
  --accent-light: #fff4d6;

  --success: #4caf50;
  --success-dark: #3e8e41;
  --success-light: #e8f5e9;

  --secondary: #8d6e63;
  --secondary-dark: #6d4c41;
  --secondary-light: #efebe9;

  --info: #4aa3df;
  --info-dark: #2c82b9;
  --info-light: #e7f3fb;

  --caution: #ffb300;
  --caution-dark: #e09f00;
  --caution-light: #fff3cd;

  --error: #e5533d;
  --error-dark: #c0392b;
  --error-light: #fdecea;

  --black: #1d1d1d;
  --dark-1: #2d2d2d;
  --dark-2: #4d4d4d;
  --dark-3: #6d6d6d;
  --gray-1: #8d8d8d;
  --gray-2: #adadad;
  --gray-3: #cdcdcd;
  --gray-4: #e0e0e0;
  --light-1: #f3f3f3;
  --light-2: #f8f8f8;
  --light-3: #fdfdfd;
  --white: #ffffff;

  --gradient-1: linear-gradient(180deg, #f4c430 0%, #d1a514 100%);
  --gradient-2: linear-gradient(180deg, #f4c430 15%, #f7b731 85%);
  --gradient-3: linear-gradient(180deg, #f4c430 0%, #8d6e63 100%);
  --gradient-4: linear-gradient(180deg, #f4c430 0%, #4caf50 100%);
  --gradient-5: linear-gradient(180deg, #f4c430 0%, #4aa3df 100%);
  --gradient-6: linear-gradient(180deg, #f4c430 0%, #ffb300 100%);
  --gradient-7: linear-gradient(180deg, #f4c430 0%, #e5533d 100%);
  --gradient-8: linear-gradient(180deg, #d1a514 0%, #e0a800 100%);
  --gradient-9: linear-gradient(180deg, #f7b731 15%, #f4c430 85%);

  --shadow-1: 0px 0px 1px rgba(0, 0, 0, 0.08),
    0px 0.5px 2px rgba(0, 0, 0, 0.16);
  --shadow-2: 0px 0px 1px rgba(0, 0, 0, 0.04),
    0px 2px 4px rgba(0, 0, 0, 0.16);
  --shadow-3: 0px 0px 2px rgba(0, 0, 0, 0.04),
    0px 4px 8px rgba(0, 0, 0, 0.16);
  --shadow-4: 0px 2px 4px rgba(0, 0, 0, 0.04),
    0px 8px 16px rgba(0, 0, 0, 0.16);
  --shadow-5: 0px 2px 8px rgba(0, 0, 0, 0.04),
    0px 16px 24px rgba(0, 0, 0, 0.16);
  --shadow-6: 0px 2px 8px rgba(0, 0, 0, 0.08),
    0px 20px 32px rgba(0, 0, 0, 0.24);
}