/* Border radius tokens */
:root {
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 32px;
  --radius-full: 9999px;
  
  --border-0: 0px;
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;
}

/* Utility classes */
.radius-none { border-radius: var(--radius-none); }
.radius-sm   { border-radius: var(--radius-sm); }
.radius-md   { border-radius: var(--radius-md); }
.radius-lg   { border-radius: var(--radius-lg); }
.radius-xl   { border-radius: var(--radius-xl); }
.radius-full { border-radius: var(--radius-full); }

.border-0 { border-width: var(--border-0); }
.border-1 { border-width: var(--border-1); }
.border-2 { border-width: var(--border-2); }
.border-3 { border-width: var(--border-3); }

.border-solid{
  border-style: solid;
}

/* BORDER-COLOR */
.border-color-primary{
  border-color: var(--color-secondary-700);
}
.border-color-secondary{
  border-color: var(--color-secondary-500);
}
.border-color-secondary-200{
    border-color: var(--color-secondary-200);
}

/* ================================
   BORDI PER LATO (style + width)
   — composizione consigliata:
     .border-top + .border-top-2 + .border-color-primary
   ================================ */

/* Solo STYLE per lato */
.border-top    { border-top-style: solid; }
.border-right  { border-right-style: solid; }
.border-bottom { border-bottom-style: solid; }
.border-left   { border-left-style: solid; }

/* WIDTH per lato */
.border-top-1    { border-top-width: var(--border-1); }
.border-top-2    { border-top-width: var(--border-2); }
.border-top-3    { border-top-width: var(--border-3); }

.border-right-1  { border-right-width: var(--border-1); }
.border-right-2  { border-right-width: var(--border-2); }
.border-right-3  { border-right-width: var(--border-3); }

.border-bottom-1 { border-bottom-width: var(--border-1); }
.border-bottom-2 { border-bottom-width: var(--border-2); }
.border-bottom-3 { border-bottom-width: var(--border-3); }

.border-left-1   { border-left-width: var(--border-1); }
.border-left-2   { border-left-width: var(--border-2); }
.border-left-3   { border-left-width: var(--border-3); }