/* GENERIC */

:root {
  --color-font-light: #f0f0f0;
  --color-font-dark: #202020;

  /* base */
  --color-base: #3d3935;
  --color-base-120: ##312e2a;
  --color-base-80: #67615a;
  --color-base-75: #726a63;
  --color-base-60: #918880;
  --color-base-50: #a39c95;
  --color-base-25: #d1cdca;
  --color-base-10: #edebea;
  --color-base-font: #f0f0f0;

  /* primary */
  --color-primary: #3d3935;
  --color-primary-120: #312e2a;
  --color-primary-80: #67615a;
  --color-primary-75: #726a63;
  --color-primary-60: #918880;
  --color-primary-50: #a39c95;
  --color-primary-25: #d1cdca;
  --color-primary-10: #edebea;
  --color-primary-font: #f0f0f0;

  /* secondary */
  --color-secondary: #898c8e;
  --color-secondary-120: #6e7068;
  --color-secondary-80: #a1a39c;
  --color-secondary-75: #a6a9a2;
  --color-secondary-60: #b8bab5;
  --color-secondary-50: #c4c5c1;
  --color-secondary-25: #e1e2e0;
  --color-secondary-10: #f3f3f3;
  --color-secondary-font: #202020;

   /* accents */
  --color-accent-primary: #f9a11b;
  --color-accent-secondary: #a6cc4a;

   /* extra */
  --color-extra-dark-green: #02592d;
  --color-extra-dark-orange: #c47600;
  --color-extra-dark-red: #590b02;
  --color-extra-dark-blue: #022859;

  --color-error: #d9261c;

  /* body */
  --color-body-back: #ffffff;
  --color-body-font: var(--color-primary);
  --color-body-alt-back: var(--color-primary-10);
  --color-body-alt-font: var(--color-primary);
  --color-body-dark-back: var(--color-primary-75);
  --color-body-dark-font: var(--color-primary-font);

  /* components */
  --color-floor-plan-position: var(--color-primary);
  --color-floor-plan-position-available: #a6cc4a;
  --color-floor-plan-position-available-marker: #728e33;
  --color-floor-plan-position-highlighted: #f9a11b;
}
/* 
.test-color-box {
  background-color: var(--color-primary);
} */