@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap");

:root {
  /* COLOURS */
  --primary-color: #238979;
  --secondary-color: #ed254e;

  --navbar-color: var(--primary-color);

  --background-color: #f0f0f0;
  --background-color-grey: #e0e0e0;
  --background-color-content: #ffffff;

  --text-color: #202020;
  --text-color-light: #5f5f5f;
  --text-color-contrast: #ffffff;
  --muted-text-color: var(--grey-5);

  --border-color: #e0e0e0;
  --select-border-color: #caced1;
  --border-hover-color: var(--primary-color);
  --border-color-dark: #b9b9b9;

  --disabled-color: #e0e0e0;

  --error-color: #ed254e;
  --danger-color: #ed254e;
  --success-color: #21bc62;
  --warning-color: #f1a90f;

  --disabled-range-color: #bababa;

  /* TYPOGRAPHY */
  --font-family: "Open Sans", sans-serif;
  --font-family-heading: "Open Sans", sans-serif;
  --font-weight: 400;
  --font-weight-heading: 600;

  --font-size: 16px;
  --font-size-xs: 13px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;

  /* BORDERS */
  --border-radius: 8px;
  --border-radius-xs: 2px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;

  --input-border-width: 1.25px;
  --button-border-width: 1.25px;
  --card-border-width: 1px;
  --table-border-width: 1px;

  /* SPACING */
  --spacing: 8px;
  --spacing-xs: 2px;
  --spacing-sm: 4px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-xxl: 24px;

  /* Screen Sizes */
  /* --screen-xs: 320px;
  --screen-sm: 640px;
  --screen-md: 768px;
  --screen-lg: 1024px;
  --screen-xl: 1280px;
  --screen-2xl: 1536px; */

  /* Search styles */
  --padding-md: 6px;
  --padding-lg: 16px;
  --margin-xs: 6px;
  --font-size-icon: 12px;
  --color-white: #ffffff;
  --bg-normal: rgba(255, 255, 255, 0.15);
  --bg-hover: rgba(255, 255, 255, 0.25);

  /* Form */
  --narrow-form-width: 400px;

  /* Home page menu background */
  --home-menu-bg: rgba(224, 224, 224, 0.8);
}

/* override colours for dark theme */
:root[data-theme="dark"] {
  --background-color: #1f1f1f;
  --background-color-grey: #292929;
  --background-color-content: #0b0b0b;

  --text-color: #ffffff;
  --text-color-light: #b9b9b9;
  --muted-text-color: var(--grey-8);

  --border-color: #2f2f2f;

  --disabled-color: #5f5f5f;

  /* Home page menu background */
  --home-menu-bg: rgba(0, 0, 0, 0.8);
}