:root {
  /* colours */
  --white: hsl(0, 0%, 100%);
  /* white: "#ffffff" */
  --black: hsl(0, 0%, 0%);
  /* black: "#000000" */
  --gray-100: hsl(204, 45%, 98%);
  /* "ice-blue": "#edf2f5" */
  --gray-200: hsl(210, 38%, 95%);
  /* "off-white": "#f3f2ee" */
  --gray-300: hsl(214, 32%, 91%);
  /* "very-light-pink": "#d4d4d4" */
  --gray-400: hsl(211, 25%, 84%);
  /* "light-blue-grey": "#bec8d2" */
  --gray-500: hsl(214, 20%, 69%);
  /* "bluey-grey": "#98a2ae" */
  --gray-600: hsl(216, 15%, 52%);
  /* "brownish-grey": "#6e6e6e" */
  --gray-700: hsl(218, 17%, 35%);
  /* slate: "#4d5766" */
  --gray-800: hsl(218, 23%, 23%);
  /* dark: "#273143" */
  --gray-900: hsl(220, 26%, 14%);
  /* "dark-grey": "#1d1e20" */
  --blue-lightest: hsl(201, 100%, 96%);
  /* "bright-sky-blue": "#00c9ff" */
  --blue-lighter: hsl(203, 82%, 76%);
  /* "cerulean-blue": "#0065ed" */
  --blue-light: hsl(207, 73%, 57%);
  /* "light-navy": "#124191" */
  --blue: hsl(209, 62%, 50%);
  /* ultramarine: "#1000a9" */
  --blue-dark: hsl(211, 61%, 43%);
  /* marine: "#052253" */
  --blue-darker: hsl(215, 41%, 28%);
  /* navy: "#001235" */
  --green-light: hsl(141, 60%, 75%);
  /* "toxic-green": "#35b41f" */
  --green: hsl(148, 48%, 43%);
  /* pine: "#143010" */
  --green-dark: hsl(152, 42%, 23%);
  /* "almost-black": "#11220e" */
  --red-light: hsl(0, 97%, 85%);
  /* "reddish-pink": "#ff3154" */
  --red: hsl(0, 76%, 57%);
  /* "red-brown": "#801515" */
  --red-dark: hsl(0, 56%, 39%);
  /* mahogany: "#550000" */
  --yellow: hsl(59, 100%, 50%);
  /* "bright-yellow": "#fffa00" */
  --gold: hsl(40, 18%, 55%);
  /* "pale-brown  ": "#a19377" */
  --orange: hsl(29, 99%, 50%);

  /* default colours */
  --primary: var(--orange);
  --secondary: var(--green);
  --tertiary: var(--red);
  --lighter: var(--gray-100);
  --light: var(--gray-400);
  --mid: var(--gray-600);
  --dark: var(--gray-800);
  --darker: var(--gray-900);
  --border-default: var(--gray-300);
  --hr-default: var(--gray-300);
  --anchor: var(--primary);

  --navbar-bg: var(--white);
  --navbar-text: var(--dark);
  --navbar-toggle: var(--dark);
  --navbar-toggle-inversion: 0;
  --navbar-hover: var(--primary);
  --navbar-active: var(--secondary);
  --footer-bg: var(--dark);
  --footer-text: var(--gray-100);
}

:root {
  /* font families */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

  /* font weights */
  --font-thin: 200;
  --font-light: 300;
  --font-normal: 400;
  --font-bold: 700;

  /* default weights */
  --font-weight-heading: var(--font-bold);
  --font-weight-body: var(--font-normal);

  /* default colours */
  --font-color-body: var(--darker);
  --font-color-heading: var(--primary);

  /* font sizes */
  --text-2xs: 0.65rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.5rem;
  --text-5xl: 4rem;
  --text-6xl: 6rem;
  --text-8xl: 8rem;

  /* font sizes for buttons */
  --btn-text: var(--text-base);
  --btn-padding: var(--btn-text);
  --btn-weight: var(--font-weight-body);
  --btn-font: var(--font-body);
}

/* font colours for types */
body {
  /* color: var(--font-color-body);
  font-weight: var(--font-weight-body); */
}

:root {
  --space-xs: 0.125rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;
  --space-48: 12rem;
  --space-56: 14rem;
  --space-64: 16rem;
  --space-px: 1px;
  --space-0: 0;
  --space-n-1: -0.25rem;
  --space-n-2: -0.5rem;
  --space-n-3: -0.75rem;
  --space-n-4: -1rem;
  --space-n-5: -1.25rem;
  --space-n-6: -1.5rem;
  --space-n-8: -2rem;
  --space-n-10: -2.5rem;
  --space-n-12: -3rem;
  --space-n-16: -4rem;
  --space-n-20: -5rem;
  --space-n-24: -6rem;
  --space-n-32: -8rem;
  --space-n-40: -10rem;
  --space-n-48: -12rem;
  --space-n-56: -14rem;
  --space-n-64: -16rem;
  --space-n-px: -1px;

  /* border radius default */
  --radius: var(--space-xs);

  /* vertical spacing unit */
  --inner-padding-y: var(--space-12);
  --inner-padding-y-negative: calc(-1 * var(--inner-padding-y));
  --inner-padding-y-half: calc(var(--inner-padding-y) / 2);

  /* vertical unit above */
  --space-above: var(--space-6);

  /* horizontal spacing unit */
  --inner-padding-x: var(--space-12);
  --inner-padding-x-half: calc(var(--inner-padding-x) / 2);

  /* brand primary */
  --brand-primary-width: var(--space-32);
  --brand-primary-color: var(--primary);

  /* container padding */
  --p-container: 7vw;
  --p-container-lg: 12vw;
  --p-container-xl: 16vw;
  --p-container-2xl: 20vw;

  /* nav spacing */
  --nav-vertical-space: var(--space-10);
}


:root {
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  ;
  --shadow-outline: 0 0 0 3px rgba(66, 153, 225, 0.5);
}