:root {
  --color-primary: #00856D;
  --color-primary-dark: #0F5548;
  --color-primary-light: #cfe0d0;

  --color-white: #fff;
  --color-black: #000;

  --color-off-white: #F4F3EE;
  --color-off-black: #333;

  --color-light-grey: #CCC;
  --color-grey: #BCB8B1;
  --color-dark-grey: #463F3A;

  --color-red: #D93F3F;
  --color-green: #2E7D32;
  --color-yellow: #F9A825;
  --color-blue: #1E88E5;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 2rem;

  /* Transparent scale */
  --color-black-80: rgba(0, 0, 0, 0.8);
  --color-black-60: rgba(0, 0, 0, 0.6);
  --color-black-40: rgba(0, 0, 0, 0.4);
  --color-black-20: rgba(0, 0, 0, 0.2);

  /* 2nd tier */
  --color-text-on-primary: var(--color-white);
  --color-warning: var(--color-red);
  --color-success: var(--color-green);

  --color-separator: var(--color-light-grey);
  --color-shadow: var(--color-black-20);

  --font-body: Inter, sans-serif;
  --font-heading: "Bricolage Grotesque", sans-serif;

  --radius-card: var(--radius-xl);

  --input-border-color: var(--color-light-grey);
  --input-radius: var(--radius-md);

  /* Light theme */
  --body-color: var(--color-off-black);
  --body-bg: var(--color-off-white);
}