:root[data-bs-theme=urcaweb]{
    /* Font principale (es. Roboto o Inter sono perfetti per M3) */
    --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif;
    
    /* Aumentare leggermente la dimensione base se 16px ti sembra piccolo */
    --bs-body-font-size: 1.00rem; 
    
    /* Rendere il testo un po' più marcato (stile Medium Contrast) */
    --bs-body-font-weight: 400;
    
    /* Spaziatura tra le righe più ariosa */
    --bs-body-line-height: 1.2;


    /* Primary Group */
    --m3-primary-rgb: 190, 19, 45;    /* Esempio: #6750A4 */
    --m3-on-primary-rgb: 255, 255, 255;
    
    /* Secondary Group */
    --m3-secondary-rgb: 98, 91, 113;   /* Esempio: #625B71 */
    --m3-on-secondary-rgb: 255, 255, 255;
    
    /* Tertiary Group */
    --m3-tertiary-rgb: 125, 82, 96;    /* Esempio: #7D5260 */
    --m3-on-tertiary-rgb: 255, 255, 255;
    
    /* Error Group */
    --m3-error-rgb: 179, 38, 30;       /* Esempio: #B3261E */
    --m3-on-error-rgb: 255, 255, 255;
    
    /* Neutral / Surface Group */
    --m3-surface-rgb: 254, 247, 255;   /* Background pagina */
    --m3-on-surface-rgb: 29, 27, 32;   /* Testo principale */
    --m3-outline-rgb: 121, 116, 126;   /* Bordi */

    /* ------------------------------------------------------ */

    /* STEP 2: GENERAZIONE VARIABILI "ON" (Custom per Bootstrap)
       Bootstrap non le ha, le creiamo noi per usarle nei componenti
    */
    --bs-on-primary: rgb(var(--m3-on-primary-rgb));
    --bs-on-secondary: rgb(var(--m3-on-secondary-rgb));
    --bs-on-tertiary: rgb(var(--m3-on-tertiary-rgb));
    --bs-on-danger: rgb(var(--m3-on-error-rgb));

    /* ------------------------------------------------------ */

    /* STEP 3: MAPPING CORE BOOTSTRAP 
       Qui colleghiamo Material ai nomi standard di Bootstrap
    */
    
    /* Colori principali e loro versioni RGB per le utility */
    --bs-primary: rgb(var(--m3-primary-rgb));
    --bs-primary-rgb: var(--m3-primary-rgb);

    --bs-secondary: rgb(var(--m3-secondary-rgb));
    --bs-secondary-rgb: var(--m3-secondary-rgb);
    
    --bs-danger: rgb(var(--m3-error-rgb));
    --bs-danger-rgb: var(--m3-error-rgb);    

    --bs-focus-ring-color: rgba(var(--m3-primary-rgb), 0.25);

    /* Testo e Sfondo pagina (Surface) */
    --bs-body-bg: rgb(var(--m3-surface-rgb));
    --bs-body-bg-rgb: var(--m3-surface-rgb);
    --bs-body-color: rgb(var(--m3-on-surface-rgb));
    --bs-emphasis-color: rgb(var(--m3-on-surface-rgb));

    /* Bordi */
    --bs-border-color: rgb(var(--m3-outline-rgb));
}

/* STEP 4: FIX DEI COMPONENTI (L'ultimo miglio)
   Applichiamo i nostri "On-Colors" ai bottoni di Bootstrap 
*/

[data-bs-theme=urcaweb] .btn-primary {    
    --bs-btn-color: var(--bs-on-primary);
    --bs-btn-hover-color: var(--bs-on-primary);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);	
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary), black 10%);
}

[data-bs-theme=urcaweb] .btn-secondary {
    --bs-btn-color: var(--bs-on-secondary);
    --bs-btn-hover-color: var(--bs-on-secondary);
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);	
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary), black 10%);
}

[data-bs-theme=urcaweb] .btn-danger {
    --bs-btn-color: var(--bs-on-danger);
    --bs-btn-hover-color: var(--bs-on-danger);
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-danger), black 10%);	
}
[data-bs-theme=urcaweb] .form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}
/* FOCUS SPECIFICO PER STATO (Glow Rosso per Danger) */
[data-bs-theme=urcaweb] .btn-danger:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--m3-error-rgb), 0.25);
}

/* --- MEDIUM CONTRAST --- */
/* Aumenta la leggibilità senza stravolgere il brand */
[data-bs-theme="urcaweb"].medium-contrast {
  /* Scuriamo i colori principali (in Light Mode) */
  --bs-primary: color-mix(in srgb, var(--bs-primary), black 15%);
  --bs-secondary: color-mix(in srgb, var(--bs-secondary), black 15%);
  --bs-danger: color-mix(in srgb, var(--bs-danger), black 15%);
  
  /* Testo e Bordi più marcati */
  --bs-body-color: color-mix(in srgb, var(--bs-body-color), black 25%);
  --bs-border-color: color-mix(in srgb, var(--bs-border-color), black 20%);

  /* ring color */
  --bs-focus-ring-color: rgba(0, 0, 0, 0.4);
  
  /* Opzionale: rendiamo il font leggermente più spesso */
  --bs-body-font-weight: 500; 
}

/* --- HIGH CONTRAST --- */
/* Massima leggibilità (stile WCAG AAA / Material 3 High) */
[data-bs-theme="urcaweb"].high-contrast {
  /* Colori quasi puri */
  --bs-primary: color-mix(in srgb, var(--bs-primary), black 40%);
  --bs-secondary: color-mix(in srgb, var(--bs-secondary), black 40%);
  --bs-danger: #800000; /* Rosso scuro puro */
  
  /* Contrasto testo massimo */
  --bs-body-color: #000000;
  --bs-emphasis-color: #000000;
  
  /* Bordi netti e spessi (tipico di M3 High) */
  --bs-border-color: #000000;
  --bs-border-width: 2px;

  /* ring color */
  --bs-focus-ring-color: rgba(0, 0, 0, 0.5);
  
  /* Font Bold per i testi principali */
  --bs-body-font-weight: 600;
}

/* Se l'utente ha attivato il Dark Mode di Bootstrap tramite data-bs-theme */
[data-bs-theme="dark"] .medium-contrast {
  --bs-primary: color-mix(in srgb, var(--bs-primary), white 15%);
  --bs-body-color: color-mix(in srgb, var(--bs-body-color), white 25%);
  --bs-border-color: color-mix(in srgb, var(--bs-border-color), white 20%);
}

[data-bs-theme="dark"] .high-contrast {
  --bs-primary: color-mix(in srgb, var(--bs-primary), white 40%);
  --bs-body-color: #ffffff;
  --bs-border-color: #ffffff;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1080px; /* Scegli tu la misura: 1000px, 1100px, ecc. */
  }
}