/*
1. Define colors custom properties
2. Assign color custom properties to properties where value is shared between light and dark mode
3. Assign color custom properties to properties where value differs between light and dark mode
4. Define other custom properties
5. Define global styles
*/

  /*  1. Define colors custom properties */

  :root {
    --black: 31, 31, 31;
    --white: 255, 255, 255;
    --red: 220, 38, 38;

    --grey: 238, 238, 238;
    --orange: 214,73,51;
    --pink: 245,239,242;
    --blue: 146, 220, 229;
  }

  /* 2. Assign colors to properties where value is same in both light and dark mode */

  :root {
    --primary-background: var(--pink);
    
    --primary-highlight: var(--white);

    --secondary-background: var(--grey);
    --secondary-text: var(--black);
    --secondary-highlight: var(--white);
  }

  /* 3. Assign colors to properties where value differs between light and dark mode */

  @media (prefers-color-scheme: light) {
    :root {
      --ui-background: var(--grey);
      --ui-text: var(--black);
      --ui-highlight: var(--white);
      --primary-text: var(--orange);
    }
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --ui-background: var(--black);
      --ui-text: var(--white);
      --ui-highlight: var(--grey);
      --primary-text: var(--black);
    }
  }

  /* 4. Define other custom properties */

  :root {
    --border-radius-default: 4px;
    --error-text: var(--red);
  }

  /* 5. Define global styles */

  body {
    background-color: rgb(var(--ui-background));
    color: rgb(var(--ui-text));
    font-family: 'Merriweather', 'Georgia', serif;
    line-height: 1.6;
    margin: 0;
  }