:root {
  /* Basic Colors */
  --clr-black: #000000;
  --clr-white: #FFFFFF;
  
  /* General Colors */
  --clr-gray-900: #111827;
  --clr-gray-800: #1E293B;
  --clr-gray-700: #334155;
  --clr-gray-600: #475569;
  --clr-gray-500: #64748B;
  --clr-gray-400: #94A3B8;
  --clr-gray-300: #CBD5E1;
  --clr-gray-200: #E2E8F0;
  --clr-gray-100: #F1F5F9;
  --clr-gray-50: #F8FAFC;
  --clr-body-color-rgb: 33, 37, 41;
  --clr-body-color: #212529;

  /* Brand Colors */
  --clr-primary: #4d9cd5;
  --clr-secondary: #4ca6a1;
  --clr-tertiary: #49b26a;

  --clr-oro: #D4AD2E;
  --clr-oro-chiaro: #DFC262;
  --clr-blue-scuro: #102542;
  --clr-azzurro: #284B63;
  --clr-vermillio: #CA3C25;
  --clr-polvere: #FDFFFC;
  --clr-nero: #000000;
  --clr-bianco: #FFFFFF;

  /* Buttons Colors */
  --clr-dark-btn-bg: var(--clr-blue-scuro);
  --clr-dark-btn-bg-hover: var(--clr-azzurro);
  --clr-dark-btn-text: var(--clr-gray-50);
  --clr-dark-btn-text-hover: var(--clr-gray-50);

  --clr-light-btn-bg: var(--clr-gray-50);
  --clr-light-btn-bg-hover: var(--clr-gray-100);
  --clr-light-btn-text: var(--clr-gray-900);
  --clr-light-btn-text-hover: var(--clr-gray-900);

  /* Content Width */
  --content-width: 800px;
  --wide-width: 1140px;

  /* Spacing */
  --base-padding: 0.75rem;
  --base-margin: 0.75rem;
  
  /* Borders */
  --base-border-thickness: 1px;
  --base-border-radius: 20px;
  --border-radius: 0.375rem;
  --border-radius-sm: 0.25rem;
  --border-radius-lg: 0.5rem;
  --border-radius-xl: 1rem;
  --border-radius-2xl: 2rem;
  --border-radius-pill: 50rem;
  
  /* Box Shadow */
  --base-box-shadow: 1px 3px 5px rgba(0,0,0,0.1);
  --box-shadow: 0 0.5rem 1rem rgba(var(--clr-body-color-rgb), 0.15);
  --box-shadow-sm: 0 0.125rem 0.25rem rgba(var(--clr-body-color-rgb), 0.075);
  --box-shadow-lg: 0 1rem 3rem rgba(var(--clr-body-color-rgb), 0.175);
  --box-shadow-inset: inset 0 1px 2px rgba(var(--clr-body-color-rgb), 0.075);
  --htc-box-shadow: 0px 15px 18px -6px rgb(40 75 98 / 71%);
  
  /* Font Families */
  --ff-primary: 'Lato', sans-serif;
  --ff-secondary: 'Montserrat', sans-serif;
  
  /* Font Sizes */
  --base-font-size: 1rem;
  --font-size-sm: calc(var(--base-font-size) * 0.75);
  --font-size-lg: calc(var(--base-font-size) * 1.5);
  --font-size-xl: calc(var(--base-font-size) * 2);
  --font-size-xxl: calc(var(--base-font-size) * 3);

  /* Transitions */
  --basic-transition: all 450ms ease;
}