:root {
  /* Colori */
  --color-black: #000;
  --color-white: #FFF;

  --color-gray-20: #333;
  --color-gray: #999;
  --color-gray-70: #B3B3B3;
  --color-gray-80: #CCC;
  --color-gray-light: #EEE;
  --color-gray-lighter: #FAFAFA;

  --color-red-darker: #A90008;
  --color-red-dark: #C00;
  --color-red: red;
  --color-red-light: #FFDDD9;

  --color-green: green;
  --color-green-light: #B3EBB1;

  --color-yellow: #B39300;
  --color-yellow-light: #FEFFB0;

  --color-brown-darker: #3E2F12;
  --color-brown-dark: #976018; /* brown */
  --color-brown-light: #EBD18B;
  --color-brown-lighter: #CCBEA2;

  --color-ocra: #C90;
  --color-ocra-2: #D79F2F;
  --color-ocra-light: #F0D99D;
  --color-ocra-light-2: #EFDFB6; /* B0B0B0 */
  --color-ocra-lighter: #FFF6E5; /* --color-brown-ultralight */

  /* Usare i numeri alla fine solo per l'opacità */
  --color-black-50: rgba(0, 0, 0, 0.5);
  --color-black-30: rgba(0, 0, 0, 0.3);

  /* banner.css */
  --color-banner-bg: var(--color-gray-light);
  --color-banner-border: var(--color-gray);

  /* book.css */
  --color-text: var(--color-black);
  --color-text-light: var(--color-gray);
  --color-text-warning: var(--color-red-darker);
  --color-link-hover: var(--color-gray-light);

  /* cathegories.css */
  --color-text-light: var(--color-gray);

  /* form.css */
  --color-form-bg: var(--color-gray-lighter);
  --color-form-border: var(--color-ocra-light-2);

  /* menu.css */
  --color-nav-menu-fg: var(--color-brown-lighter);
  --color-nav-menu-bg: var(--color-brown-darker);
  --color-nav-menu-selected-bg: var(--color-ocra-lighter);

  /* orders.css */
  --color-step: var(--color-gray-70);
  --color-step-current: var(--color-black);

  /* pages.css */
  --color-table-border-black: var(--color-black);

  /* pagination.css */
  --color-pagination-disabled-fg: var(--color-gray);
  --color-pagination-current-bg: var(--color-gray-80);
  --color-pagination-link-border: var(--color-gray);
  --color-pagination-link-hover-bg: var(--color-black);

  /* scaffold.css */
  --color-canvas-bg: var(--color-white);
  --color-canvas-fg: var(--color-gray-20);
  --color-pre-bg: var(--color-gray-light);
  --color-link-fg: var(--color-black);
  --color-link-bg: var(--color-white);
  --color-error: var(--color-red);
  --color-error-bg: var(--color-red-light);
  --color-error-box-bg: var(--color-gray-light);
  --color-error-box-header-fg: var(--color-white); /* <-- ? */
  --color-error-box-header-bg: var(--color-red-dark); /* <-- ? Usare un solo rosso (questo) anche per l'errore? */

  /* scores.css */
  --color-instrumentation-fg: var(--color-gray); /* <-- Vedi con subtitle */

  /* screen.css */
  --color-h2-fg: var(--color-ocra); /* --color-sub-headings-fg (vedi h3) or --accent */
  --color-header-bg: var(--color-ocra-2); /* FIXME Unificare con il precedente (--color-h2-fg) */
  --color-header-fg-light: var(--color-ocra-light);
  --color-tag-fg: var(--color-brown-dark);
  --color-tag-bg: var(--color-brown-light);
  --color-flash-notice-fg: var(--color-green);
  --color-flash-notice-bg: var(--color-green-light);
  --color-flash-alert-fg: var(--color-yellow);
  --color-flash-alert-bg: var(--color-yellow-light);
  --color-flash-error-fg: var(--color-red);
  --color-flash-error-bg: var(--color-red-light);
  --color-footer-fg: var(--color-white);
  --color-footer-bg: var(--color-gray-80);
  --color-search-border: var(--color-ocra-2); /* --color-border-accent */
  --color-search-shadow: var(--color-black-30); /* --color-shadow */

  /* signup.css */
  --color-box-bg: var(--color-gray-lighter);
  --color-box-border: var(--color-ocra-light-2);

  /* table.css */
  --color-table-header-fg: var(--color-white);
  --color-table-header-bg: var(--color-ocra-2);
  --color-table-border: var(--color-ocra-light);
  --color-table-border-dark: var(--color-ocra-2);

  /* users.css */
  --color-border: var(--color-gray-80);
}