:root {
  --font: 'At Aero', sans-serif;
  --font-super: 'At Aero Super', sans-serif;
  --font-base-size: 16px;
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  --screen-sm: 576px;
  --screen-md: 768px;
  --screen-lg: 992px;
  --screen-xl: 1200px;
  --screen-xxl: 1400px;

  --container-xxs: 100px;
  --container-xs: 200px;
  --container-s: 300px;
  --container-sm: 400px;
  --container-ms: 500px;
  --container-m: 600px;
  --container-l: 800px;
  --container-xl: 1200px;
  --container-xxl: 1600px;

  --navbar-height: 5rem; /* 80px */
  --sidebar-width: 16rem; /* 256px */

  --theme-color-grad: linear-gradient(120deg, var(--theme-color) 10%, var(--theme-color-darker) 130%);
  --ryalto-art: url("/assets/ryalto_art_04_2023-076b37b1.png");
  --ryalto-logo: url("/assets/ryalto_new_logo-1bba2265.png");
  --ryalto-login-image: url("/assets/login_image-87421920.jpeg");

  --brand-charcoal: #1C1C26;
  --brand-charcoal-lightest: #f0f2f2;
  --blue-black: #041725;
  --blue-background-grad: linear-gradient(135deg, var(--brand-charcoal), var(--brand-turquoise));
  --color-border: #e6ecf0;

  --brand-turquoise: #00D6E3;
  --brand-turquoise-darker: #008e96;
  --brand-turquoise-lighter: #63f6ff;

  --pure-white: white;
  --off-white: #fcfdfe;
  --lightest-gray: #f6f8fa;
  --light-gray: #e6ecf0;
  --mid-gray: #c9ced2;
  --dark-gray: #4d4d4d;
  --blue-gray: #abb8c3;
  --svg-gray: #ABABAB;
  --yellow-darker: #ff9800;
  --yellow: #FFC306;
  --yellow-lighter: #ffedb0;
  --blue: #2F98E8;
  --blue-darker: #2F98E8;
  --charcoal-lightest: #EAEAF0;
  --transparent-gray: #e6ecf095;
  --transparent-gray-grad: linear-gradient(to right, #abb8c35d, #abb8c39d);
  --gray-grad: linear-gradient(to right, var(--off-white) 10%, var(--theme-tenth-opacity-color) 120%);
  --light-grad-vertical: linear-gradient(to bottom, var(--lightest-gray), var(--theme-tenth-opacity-color));
  --gray-box-shadow: 0px 4px 4px rgba(128, 128, 128, 0.25);
  --gray-surround-shadow: 0px 2px 6px rgba(128, 128, 128, 0.25);
  --gray-box-shadow-inverse: 0px -4px 4px rgba(128, 128, 128, 0.25);
  --border-radius: 6px;

  --ink: var(--blue-black);
  --ink-50: #04172550;
  --ink-80: #041725CC;
  --ink-gray: #526678;

  --warning: #FF8727;
  --warning-light: #FFB479;
  --warning-lightest: #fff0dc;
  --warning-dark: #DE6402;
  --danger: #CD0000;
  --danger-light: #DF6768;
  --danger-lightest: #F4CCCD;
  --danger-dark: #A30000;
  --success: #009900;
  --success-light: #69C06A;
  --success-lightest: #E6F7E6;
  --success-dark: #006600;

  --admin-color: #ff9800; /* Same as var(--brand-yellow-darker) */
  --creator-color: purple;
  --publisher-color: teal;

  /* Material UI (Google) guidelines on color and grayscale choice and naming: https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors */
  --gray-200: #eeeeee;
  --gray-400: #bdbdbd;
  --gray-500: #9e9e9e;
  --gray-700: #616161;

  /* Component Global Variables */
  --btn-min-width: 140px
}

.gray {
  color: var(--ink-gray);
  fill: var(--ink-gray);
}