/* GLOBAL VARIABLES */
:root{
  /* PALETTE */
  --palette-white-1: #fff8f0;
  --palette-blue-1: #392f5a;
  --palette-orange-1: #ff8811;

  /* COLORS */
  --main-bg: var(--palette-blue-1);
  --main-fg: var(--palette-white-1);
  --main-accent: var(--palette-orange-1);
  
  --letter-bg-1: #32373b;
  --letter-fg-1: #fff;
  --letter-bg-2: #4a5859;
  --letter-fg-2: #fff;
  --letter-bg-3: #f4d6cc;
  --letter-fg-3: #000;
  --letter-bg-4: #f4b860;
  --letter-fg-4: #000;
  --letter-bg-5: #c83e4d;
  --letter-fg-5: #000;
  --letter-bg-6: #b47eb3;
  --letter-fg-6: #000;
  --letter-bg-7: #fdf5bf;
  --letter-fg-7: #000;
  --letter-bg-8: #ffd5ff;
  --letter-fg-8: #000;
  --letter-bg-9: #92d1c3;
  --letter-fg-9: #000;
  --letter-bg-10: #8bb8a8;
  --letter-fg-10: #000;

  --error-border: var(--letter-bg-5);

  /* MARGIN */
  --margin-base: 1rem;
  --margin-larger: calc(var(--margin-base) * 1.8);
  --margin-large: calc(var(--margin-base) * 1.2);
  --margin-small: calc(var(--margin-base) * 0.8);
  --margin-smaller: calc(var(--margin-base) * 0.4);

  /* PADDING */
  --padding-base: 1rem;
  --padding-larger: calc(var(--padding-base) * 1.8);
  --padding-large: calc(var(--padding-base) * 1.2);
  --padding-small: calc(var(--padding-base) * 0.8);
  --padding-smaller: calc(var(--padding-base) * 0.4);

  /* GUTTERS */
  --gutters-base: 1rem;
  --gutters-larger: calc(var(--gutters-base) * 1.8);
  --gutters-large: calc(var(--gutters-base) * 1.2);
  --gutters-small: calc(var(--gutters-base) * 0.8);
  --gutters-smaller: calc(var(--gutters-base) * 0.4);

  /* SIZES */
  --max-width-app: 600px;

  /* BORDERS */
  --border-radii-base: 6px;
  --border-radii-full: 100vh;

}