:root {
  --primary-accent-color: var(--formlabs-orange);
  --secondary-button-border-color: var(--orange100);
  --page-light-theme-background-color: var(
    --Cream-1---Light-Background,
    #fefdf9
  );

  /********
   We use 2 colors scale, one for light and one for dark variant of the plugins.
   Figma link for colors: https://www.figma.com/design/0hLNVKfA7fkAzmap9VsiuH/Formlabs-UI-Core-(Redesign)?node-id=17226-229813&t=FtkZgqp8N80N8qC3-0
   Currently we use the CREAM scale for light and STONE scale for dark.
   To abstract away the color names, we use the following naming convention:
   ********/
  /* BACKGROUNDS */
  --light-1: #fefdf9;
  --light-2: #fbf9f4;
  /* INTERACTIVE COMPONENTS */
  --light-3: #f3f0e9;
  --light-4: #ece8df;
  --light-5: #e5e1d6;
  /* BORDERS AND SEPARATORS */
  --light-6: #ddd9cf;
  --light-7: #d2cec4;
  --light-8: #bfbbb1;
  /* SOLID COLORS */
  --light-9: #908c83;
  --light-10: #868178;
  /* ACCESSIBLE TEXT */
  --light-11: #666259;
  --light-12: #232018;

  /* BACKGROUNDS */
  --dark-1: #111110;
  --dark-2: #1a1918;
  /* INTERACTIVE COMPONENTS */
  --dark-3: #232221;
  --dark-4: #2a2928;
  --dark-5: #32312f;
  /* BORDERS AND SEPARATORS */
  --dark-6: #3b3a38;
  --dark-7: #494846;
  --dark-8: #615f5d;
  /* SOLID COLORS */
  --dark-9: #706e6b;
  --dark-10: #7d7b78;
  /* ACCESSIBLE TEXT */
  --dark-11: #b7b4af;
  --dark-12: #f1eee7;

  --line-height: 1.5em;
}