/* ===================================
   UTILITIES — width & max-width
   Usa i tokens definiti in tokens.css
   =================================== */

:root {
  /* Max-width */
  --max-width-100: 100px;
  --max-width-150: 100px;
  --max-width-200: 200px;
  --max-width-250: 250px;
  --max-width-300: 300px;
  --max-width-350: 350px;
  --max-width-400: 400px;
  --max-width-450: 450px;
  --max-width-500: 500px;
  --max-width-550: 550px;
  --max-width-600: 600px;
  --max-width-650: 650px;
  --max-width-700: 700px;
  --max-width-750: 750px;
  --max-width-800: 800px;
  --max-width-850: 850px;
  --max-width-900: 900px;
  --max-width-950: 950px;
  --max-width-1000: 1000px;
  --max-width-1050: 1050px;
  --max-width-1100: 1100px;
  --max-width-1150: 1150px;
  --max-width-1200: 1200px;
  --max-width-1250: 1250px;
  --max-width-1300: 1300px;
  --max-width-1350: 1350px;
  --max-width-1400: 1400px;

  /* Width */
  --width-content: max-content;
  --width-50percento: 50%;
  --width-70percento: 70%;
  --width-100: 100%;
  --width-50px: 50px;
  --width-75px: 75px;
  --width-100px: 100px;
  --width-150px: 150px;
  --width-200px: 200px;
  --width-250px: 250px;
  --width-300px: 300px;
  --width-350px: 350px;
  --width-400px: 400px;
  --width-450px: 450px;
  --width-500px: 500px;
  --width-600px: 600px;
  --width-700px: 700px;
  --width-800px: 800px;
  --width-900px: 900px;
  --width-1000px: 1000px;
}

/* 🔹 Max-width utilities */
.max-width-100  { max-width: var(--max-width-100); }
.max-width-150  { max-width: var(--max-width-150); }
.max-width-200  { max-width: var(--max-width-200); }
.max-width-250  { max-width: var(--max-width-250); }
.max-width-300  { max-width: var(--max-width-300); }
.max-width-350  { max-width: var(--max-width-350); }
.max-width-400  { max-width: var(--max-width-400); }
.max-width-450  { max-width: var(--max-width-450); }
.max-width-500  { max-width: var(--max-width-500); }
.max-width-550  { max-width: var(--max-width-550); }
.max-width-600  { max-width: var(--max-width-600); }
.max-width-650  { max-width: var(--max-width-650); }
.max-width-700  { max-width: var(--max-width-700); }
.max-width-750  { max-width: var(--max-width-750); }
.max-width-800  { max-width: var(--max-width-800); }
.max-width-850  { max-width: var(--max-width-850); }
.max-width-900  { max-width: var(--max-width-900); }
.max-width-950  { max-width: var(--max-width-950); }
.max-width-1000 { max-width: var(--max-width-1000); }
.max-width-1050 { max-width: var(--max-width-1050); }
.max-width-1100 { max-width: var(--max-width-1100); }
.max-width-1150 { max-width: var(--max-width-1150); }
.max-width-1200 { max-width: var(--max-width-1200); }
.max-width-1250 { max-width: var(--max-width-1250); }
.max-width-1300 { max-width: var(--max-width-1300); }
.max-width-1350 { max-width: var(--max-width-1350); }
.max-width-1400 { max-width: var(--max-width-1400); }

/* 🔹 Width utilities */
.width-content { width: var(--max-content); }
.width-50percento { width: var(--width-50percento); }
.width-70percento { width: var(--width-70percento); }
.width-100  { width: var(--width-100); }
.width-50px { width: var(--width-50px); }
.width-75px { width: var(--width-75px); }
.width-100px  { width: var(--width-100px); }
.width-150px  { width: var(--width-150px); }
.width-200px  { width: var(--width-200px); }
.width-250px  { width: var(--width-250px); }
.width-300px  { width: var(--width-300px); }
.width-350px  { width: var(--width-350px); }
.width-400px  { width: var(--width-400px); }
.width-450px  { width: var(--width-450px); }
.width-500px  { width: var(--width-500px); }
.width-600px  { width: var(--width-600px); }
.width-700px  { width: var(--width-700px); }
.width-800px  { width: var(--width-800px); }
.width-900px  { width: var(--width-900px); }
.width-1000px { width: var(--width-1000px); }