@import url('./main-layout.css');
@import url('./components/vaadin-button.css');

html {
  --lumo-border-radius: 8px;
  --lumo-space-xl: 1.875rem;
  --lumo-space-l: 1.25rem;
  --lumo-space-m: 0.625rem;
  --lumo-space-s: 0.3125rem;
  --lumo-space-xs: 0.1875rem;
  /*--lumo-primary-text-color: rgb(255, 153, 0);*/
  --lumo-primary-text-color:  #E6BE5F;
  --lumo-primary-color-50pct: rgba(255, 153, 0, 0.5);
  --lumo-primary-color-10pct: rgba(255, 153, 0, 0.4);
  --lumo-error-text-color: rgb(237, 127, 151);
  --lumo-error-color-50pct: rgba(237, 127, 151, 0.5);
  --lumo-error-color-10pct: rgba(237, 127, 151, 0.1);
  
  --lumo-text-color: var(--lumo-primary-color);
  
  
  --lumo-success-text-color: rgb(84, 222, 110);
  --lumo-success-color-50pct: rgba(84, 222, 110, 0.5);
  --lumo-success-color-10pct: rgba(84, 222, 110, 0.1);
  
  --lumo-base-color:var(--dama-mainlayout-menubar-color_l8);
  --lumo-tint: #f4eee1;
  --lumo-shade: hsl(42, 33%, 13%);
  --lumo-primary-color: var(--dama-mainlayout-topbar-color);
  --lumo-error-color: rgb(224, 2, 18);  /* originale: 192, 28, 40 */
  --lumo-success-color: rgb(46, 194, 126);
  --lumo-success-contrast-color: #2D2C29;
  --lumo-header-text-color: #E6BE5F;
  --lumo-primary-contrast-color: rgb(26, 95, 180);
  --lumo-error-contrast-color: #2D2C29;
  --lumo-font-weight-regular: 400;
  
  --lucca-gray-origin:#424243;
  --lucca-gray-1: #656567;
  --lucca-gray-2: #7e7e81;
  --lucca-gray-3:#98989a;
  --lucca-gray-4:#b2b2b3;
  --lucca-gray-5:#cbcbcd;
  --lucca-gray-6: #e5e5e6;
  
  --lucca-magenta-origin:#5B1935;
  --lucca-magenta-1:#50162e;
  --lucca-magenta-2: #782145;
  --lucca-magenta-3: #a02c5c;
  
  --dama-mainlayout-menubar-color: #233448; 
  
  --dama-mainlayout-menubar-color-trasparent: #233448; 
  --dama-mainlayout-menubar-color-trasparent: rgba(35, 52, 72, 0.7);
  
  --dama-mainlayout-menubar-color_l1: #324b67;
  --dama-mainlayout-menubar-color_l2: #42648a;
  --dama-mainlayout-menubar-color_l3: #537dac;
  --dama-mainlayout-menubar-color_l4: #7597bd;
  --dama-mainlayout-menubar-color_l5: #98b1cd;
  --dama-mainlayout-menubar-color_l6: #bacbde; /* originale: #bacbde, #692624, #a6120d */
  --dama-mainlayout-menubar-color_l7: #dde5ee;
  --dama-mainlayout-menubar-color_l8: #eef2f7;
  
  --pie-serie-color-1: #42648a;
  --pie-serie-color-2: #537dac;
  
  --jmale-poi-in-progress-color: #FFA500;
  --jmale-poi-completed-color: var(--lumo-success-color);
  --lumo-body-text-color: var(--dama-mainlayout-menubar-color_l2);

  --dama-mainlayout-topbar-color: #4C596A;
  --dama-mainlayout-body-color: rgba(255, 255, 255, 0.7);
  --dama-mainlayout-font-color: #B6B8BF;
  --dama-button-section-poi:var(--dama-mainlayout-topbar-color);
  --dama-button-dealBtn:var(--dama-mainlayout-topbar-color);
  
  --vaadin-button-font-weight: 420;
  --vaadin-button-primary-text-color: var(--lumo-header-text-color);
  --vaadin-button-primary-font-weight: 420;
  
  --vaadin-input-field-border-width: 1px;
  --vaadin-input-field-value-color: var(--dama-mainlayout-menubar-color) !important;
  
  --vaadin-input-field-border-color: var(--dama-mainlayout-menubar-color_l6);
  --vaadin-input-field-background:var(--dama-mainlayout-menubar-color_l7);
  --vaadin-checkbox-background: var(--dama-mainlayout-menubar-color_l7);
  --vaadin-checkbox-checkmark-color: var(--lumo-primary-text-color);
  
}

.my-button {
    transition: background-color 0.3s ease; /* Transizione per il cambio di colore */
    border-radius: 50%; /* Bordo arrotondato */
    
}

.my-button:hover {
    background-color: var(--lumo-primary-color-10pct); /* Cambio di colore al passaggio del mouse */
}