/**
 * Impronta — Components
 * Tutti i componenti UI riutilizzabili.
 * Dipende da tokens.css e base.css.
 *
 * INDICE:
 *   1.  Buttons
 *   2.  Forms
 *   3.  Cards
 *   4.  Alerts / Flash
 *   5.  Badges / Pills
 *   6.  Dividers
 *   7.  Modals (backdrop + card)
 *   8.  Upgrade modal
 *   9.  Likers modal
 *   10. Cookie banner
 *   11. PWA install
 *   12. Autocomplete
 *   13. Pagination
 *   14. Stat cards (dashboard)
 *   15. Data table (admin)
 *   16. Avatar
 *   17. Empty state
 */

/* ============================================================
   1. BUTTONS
   ============================================================ */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             7px;
  padding:         9px 18px;
  font-family:     var(--font);
  font-size:       var(--fs-sm);
  font-weight:     var(--fw-medium);
  letter-spacing:  .01em;
  border-radius:   var(--r);
  border:          0.5px solid transparent;
  cursor:          pointer;
  transition:      background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  text-decoration: none;
  white-space:     nowrap;
  line-height:     1;
  -webkit-tap-highlight-color: transparent;
}
.btn:disabled { opacity: .38; cursor: not-allowed; pointer-events: none; }

/* Primary — oro */
.btn--primary {
  background:   var(--gold);
  color:        var(--bg);
  border-color: var(--gold);
}
.btn--primary:hover {
  background:      rgba(var(--gold-rgb), .85);
  border-color:    rgba(var(--gold-rgb), .85);
  color:           var(--bg);
  text-decoration: none;
}

/* Ghost — bordo sottile */
.btn--ghost {
  background:   transparent;
  color:        var(--ink55);
  border-color: var(--ln2);
}
.btn--ghost:hover {
  background:      var(--ink06);
  color:           var(--ink70);
  border-color:    var(--ln3);
  text-decoration: none;
}

/* Danger */
.btn--danger {
  background:   transparent;
  color:        var(--terra);
  border-color: var(--terra-ln);
}
.btn--danger:hover {
  background:      var(--terra-bg);
  text-decoration: none;
}

/* Sage / success */
.btn--sage {
  background:   transparent;
  color:        var(--sage);
  border-color: var(--sage-ln);
}
.btn--sage:hover {
  background:      var(--sage-bg);
  text-decoration: none;
}

/* Google login */
.btn--google {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  background:      var(--bg2);
  border:          0.5px solid var(--ln2);
  color:           var(--ink70);
  font-size:       var(--fs-base);
  padding:         11px 18px;
  border-radius:   var(--r);
  text-decoration: none;
  transition:      background var(--t-fast), border-color var(--t-fast);
}
.btn--google:hover {
  background:      var(--bg3);
  border-color:    var(--ln3);
  color:           var(--ink);
  text-decoration: none;
}

/* Sizes */
.btn--sm  { padding: 6px 13px; font-size: var(--fs-xs); }
.btn--lg  { padding: 12px 26px; font-size: var(--fs-md); }
.btn--xs  { padding: 3px 9px; font-size: 10px; }
.btn--block { width: 100%; justify-content: center; }

/* Auth divider */
.auth-divider {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin:      16px 0;
  color:       var(--ink30);
  font-size:   var(--fs-xs);
  font-family: var(--mono);
  letter-spacing: .08em;
}
.auth-divider::before,
.auth-divider::after {
  content:    '';
  flex:       1;
  height:     0.5px;
  background: var(--ln2);
}

/* ============================================================
   2. FORMS
   ============================================================ */
.form-group   { margin-bottom: 16px; }

.form-label {
  display:        block;
  font-family:    var(--mono);
  font-size:      9px;
  font-weight:    var(--fw-regular);
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--ink30);
  margin-bottom:  7px;
}

.form-input,
.form-select {
  display:       block;
  width:         100%;
  padding:       10px 14px;
  background:    var(--bg);
  border:        0.5px solid var(--ln2);
  border-radius: var(--r);
  font-size:     var(--fs-base);
  font-family:   var(--font);
  font-weight:   var(--fw-light);
  color:         var(--ink);
  transition:    border-color var(--t-fast), box-shadow var(--t-fast);
  appearance:    none;
  line-height:   var(--lh-base);
}
.form-input:focus,
.form-select:focus {
  outline:      none;
  border-color: var(--gold);
  box-shadow:   0 0 0 3px rgba(var(--gold-rgb), .10);
}
.form-input::placeholder { color: var(--ink30); }
.form-input.error         { border-color: var(--terra); }

.form-select { padding-right: 36px; }

.form-note  { font-size: var(--fs-xs); color: var(--ink30); margin-top: 5px; line-height: var(--lh-snug); }
.form-error { font-size: var(--fs-xs); color: var(--terra); margin-top: 5px; }
.form-hint  { font-size: var(--fs-xs); color: var(--ink30); margin-top: 4px; font-style: italic; }

.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

@media (max-width: 600px) {
  .form-row,
  .form-row-3 { grid-template-columns: 1fr; }
}

/* Flash message position utility */
.flash-app   { margin: 10px 14px 0; }
.flash-guest { margin: 10px 24px 0; }

/* ============================================================
   3. CARDS
   ============================================================ */
.card {
  background:    var(--card);
  border:        0.5px solid var(--ln);
  border-radius: var(--rL);
  padding:       20px;
}
.card--sm     { padding: 14px 16px; }
.card--lg     { padding: 28px; }
.card--accent { border-color: var(--gold-ln); background: var(--gold-bg); }
.card--sage   { border-color: var(--sage-ln); background: var(--sage-bg); }
.card--terra  { border-color: var(--terra-ln); background: var(--terra-bg); }
.card--violet { border-color: var(--violet-ln); background: var(--violet-bg); }

/* ============================================================
   4. ALERTS / FLASH
   ============================================================ */
.alert {
  padding:       10px 14px;
  border-radius: var(--r);
  font-size:     var(--fs-sm);
  font-weight:   var(--fw-regular);
  border:        0.5px solid;
  margin-bottom: 14px;
  line-height:   var(--lh-snug);
}
.alert--error   { background: var(--terra-bg);  border-color: var(--terra-ln);  color: var(--terra); }
.alert--success { background: var(--sage-bg);   border-color: var(--sage-ln);   color: var(--sage);  }
.alert--info    { background: var(--violet-bg); border-color: var(--violet-ln); color: var(--violet);}
.alert--warning { background: rgba(var(--gold-rgb), .08); border-color: var(--gold-ln); color: var(--gold); }

/* Verify banner */
.verify-banner {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           12px;
  padding:       9px 14px;
  margin:        8px 14px 0;
  background:    var(--gold-bg);
  border:        0.5px solid var(--gold-ln);
  border-radius: var(--r);
}
.verify-banner__text {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   var(--fs-sm);
  color:       var(--gold);
}
.verify-banner__btn {
  background:    none;
  border:        0.5px solid var(--gold-ln);
  color:         var(--gold);
  font-size:     var(--fs-xs);
  padding:       3px 10px;
  border-radius: var(--r);
  cursor:        pointer;
  font-family:   var(--font);
  white-space:   nowrap;
  transition:    background var(--t-fast);
}
.verify-banner__btn:hover { background: rgba(var(--gold-rgb), .10); }

/* ============================================================
   5. BADGES / PILLS
   ============================================================ */
.badge {
  display:        inline-flex;
  align-items:    center;
  padding:        3px 9px;
  border-radius:  var(--rFull);
  font-family:    var(--mono);
  font-size:      9px;
  font-weight:    var(--fw-regular);
  letter-spacing: .08em;
  text-transform: uppercase;
  border:         0.5px solid;
  white-space:    nowrap;
  line-height:    1.4;
}
.badge--gold   { background: var(--gold-bg);   border-color: var(--gold-ln);   color: var(--gold);   }
.badge--sage   { background: var(--sage-bg);   border-color: var(--sage-ln);   color: var(--sage);   }
.badge--terra  { background: var(--terra-bg);  border-color: var(--terra-ln);  color: var(--terra);  }
.badge--violet { background: var(--violet-bg); border-color: var(--violet-ln); color: var(--violet); }
.badge--muted  { background: var(--ink06);     border-color: var(--ln);        color: var(--ink40);  }

/* HD type badges — usano colori intoccabili */
.badge--generator            { background: rgba(90,128,96,.1);  border-color: rgba(90,128,96,.25);  color: var(--hd-generator);             }
.badge--manifesting_generator{ background: rgba(138,154,78,.1); border-color: rgba(138,154,78,.25); color: var(--hd-manifesting_generator); }
.badge--projector            { background: rgba(181,144,58,.1); border-color: rgba(181,144,58,.25); color: var(--hd-projector);             }
.badge--manifestor           { background: rgba(168,92,56,.1);  border-color: rgba(168,92,56,.25);  color: var(--hd-manifestor);            }
.badge--reflector            { background: rgba(122,106,144,.1);border-color: rgba(122,106,144,.25);color: var(--hd-reflector);             }

/* Beta */
.badge--beta {
  background:   rgba(var(--gold-rgb), .07);
  border-color: var(--gold-ln);
  color:        var(--gold);
  opacity:      .8;
}

/* ============================================================
   6. DIVIDERS
   ============================================================ */
.divider {
  border:     none;
  border-top: 0.5px solid var(--ln);
  margin:     var(--sp-5) 0;
}
.divider--gold {
  border-top: none;
  height:     0.5px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .18), transparent);
  margin:     var(--sp-5) 0;
}
.divider--lg { margin: var(--sp-8) 0; }

/* ============================================================
   7. MODALS — backdrop + card base
   ============================================================ */
.modal-backdrop {
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, .65);
  backdrop-filter: blur(3px);
  z-index:         var(--z-modal);
  display:         none;
  align-items:     center;
  justify-content: center;
  padding:         20px;
}
.modal-backdrop.open { display: flex; }

.modal-card {
  position:      relative;
  background:    var(--card);
  border:        0.5px solid var(--ln2);
  border-radius: var(--rXL);
  padding:       28px;
  max-width:     440px;
  width:         100%;
  box-shadow:    0 24px 64px rgba(0, 0, 0, .55);
}

.modal-close {
  position:      absolute;
  top:           12px;
  right:         14px;
  background:    none;
  border:        none;
  color:         var(--ink30);
  font-size:     20px;
  line-height:   1;
  cursor:        pointer;
  padding:       4px;
  border-radius: var(--r);
  transition:    color var(--t-fast), background var(--t-fast);
  display:       flex;
  align-items:   center;
}
.modal-close:hover { color: var(--ink70); background: var(--ink06); }

/* ============================================================
   8. UPGRADE MODAL
   ============================================================ */
.upg-backdrop {
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, .7);
  backdrop-filter: blur(3px);
  z-index:         var(--z-top);
  display:         none;
  align-items:     center;
  justify-content: center;
  padding:         20px;
}
.upg-backdrop.open { display: flex; }

.upg-card {
  position:      relative;
  background:    var(--card);
  border:        0.5px solid var(--gold-ln);
  border-radius: var(--rXL);
  padding:       32px 26px 22px;
  max-width:     380px;
  width:         100%;
  text-align:    center;
  box-shadow:    0 24px 64px rgba(0, 0, 0, .55);
}

.upg-close {
  position:      absolute;
  top:           10px;
  right:         13px;
  background:    none;
  border:        none;
  color:         var(--ink30);
  font-size:     22px;
  line-height:   1;
  cursor:        pointer;
  padding:       4px;
  transition:    color var(--t-fast);
}
.upg-close:hover { color: var(--ink70); }

.upg-spark   { font-size: 24px; color: var(--gold); margin-bottom: 10px; opacity: .8; }
.upg-title   { font-size: var(--fs-h2); font-weight: var(--fw-light); color: var(--ink); margin: 0 0 10px; line-height: var(--lh-snug); }
.upg-body    { font-size: var(--fs-base); color: var(--ink55); line-height: var(--lh-base); margin: 0 0 22px; }
.upg-cta     { display: block; width: 100%; margin-bottom: 10px; }
.upg-dismiss {
  background:     none;
  border:         none;
  color:          var(--ink30);
  font-size:      var(--fs-sm);
  cursor:         pointer;
  font-family:    var(--mono);
  letter-spacing: .06em;
  transition:     color var(--t-fast);
}
.upg-dismiss:hover { color: var(--ink55); }

/* ============================================================
   9. LIKERS MODAL
   ============================================================ */
.lk-backdrop {
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, .7);
  backdrop-filter: blur(3px);
  z-index:         var(--z-top);
  display:         none;
  align-items:     center;
  justify-content: center;
  padding:         20px;
}
.lk-backdrop.open { display: flex; }

.lk-card {
  position:      relative;
  background:    var(--card);
  border:        0.5px solid var(--ln2);
  border-radius: var(--rXL);
  padding:       22px 20px 18px;
  max-width:     360px;
  width:         100%;
  max-height:    70vh;
  overflow:      auto;
  box-shadow:    0 24px 64px rgba(0, 0, 0, .55);
}
.lk-close {
  position:    absolute;
  top:         10px;
  right:       13px;
  background:  none;
  border:      none;
  color:       var(--ink30);
  font-size:   20px;
  line-height: 1;
  cursor:      pointer;
  padding:     4px;
  transition:  color var(--t-fast);
}
.lk-close:hover { color: var(--ink70); }
.lk-title {
  font-size:    15px;
  font-weight:  var(--fw-medium);
  color:        var(--ink);
  margin:       0 0 14px;
  padding-right: 24px;
}
.lk-list { display: flex; flex-direction: column; gap: 2px; }

.post-liker {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         7px 8px;
  border-radius:   var(--r);
  text-decoration: none;
  transition:      background var(--t-fast);
}
.post-liker:hover           { background: var(--gold-bg); }
.post-liker__avatar,
.post-liker__fallback       { width: 32px; height: 32px; border-radius: var(--rFull); flex-shrink: 0; object-fit: cover; }
.post-liker__fallback       {
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--gold-bg);
  color:           var(--gold);
  font-weight:     var(--fw-medium);
  font-size:       12px;
}
.post-liker__name           { font-size: var(--fs-sm); color: var(--ink70); }
.lk-empty                   { font-size: var(--fs-sm); color: var(--ink30); text-align: center; padding: 12px; }

/* ============================================================
   10. COOKIE BANNER
   ============================================================ */
.ck-banner {
  position:      fixed;
  left:          12px;
  right:         12px;
  bottom:        12px;
  z-index:       var(--z-top);
  background:    var(--card);
  border:        0.5px solid var(--ln2);
  border-radius: var(--rL);
  padding:       16px 18px;
  max-width:     680px;
  margin:        0 auto;
  box-shadow:    0 8px 32px rgba(0, 0, 0, .4);
}
.ck-banner__text {
  margin:      0 0 12px;
  font-size:   13px;
  line-height: var(--lh-base);
  color:       var(--ink55);
}
.ck-banner__text a { color: var(--gold); }
.ck-banner__actions {
  display:     flex;
  gap:         8px;
  flex-wrap:   wrap;
}
.ck-btn {
  flex:          1;
  min-width:     110px;
  padding:       9px 14px;
  border-radius: var(--r);
  font-size:     var(--fs-base);
  font-weight:   var(--fw-medium);
  cursor:        pointer;
  font-family:   var(--font);
  transition:    all var(--t-fast);
  border:        0.5px solid;
}
.ck-btn--accept { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.ck-btn--accept:hover { background: rgba(var(--gold-rgb), .85); }
.ck-btn--reject { background: transparent; color: var(--ink55); border-color: var(--ln2); }
.ck-btn--reject:hover { background: var(--ink06); border-color: var(--ln3); }

/* ============================================================
   11. PWA INSTALL
   ============================================================ */
.pwa-block {
  background:    var(--card);
  border:        0.5px solid var(--ln2);
  border-radius: var(--rXL);
  padding:       32px 24px;
  max-width:     420px;
  margin:        0 auto;
  text-align:    center;
}
.pwa-block__logo {
  width:         64px;
  height:        64px;
  border-radius: var(--rL);
  display:       block;
  margin:        0 auto 16px;
}
.pwa-block__title { font-size: var(--fs-h3); font-weight: var(--fw-medium); color: var(--ink); margin-bottom: 6px; }
.pwa-block__sub   { font-size: var(--fs-sm); color: var(--ink40); margin-bottom: 24px; line-height: var(--lh-base); }
.pwa-block__buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.pwa-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       9px 18px;
  border-radius: var(--r);
  border:        0.5px solid var(--ln2);
  background:    var(--bg);
  color:         var(--ink70);
  font-family:   var(--font);
  font-size:     var(--fs-base);
  font-weight:   var(--fw-medium);
  cursor:        pointer;
  transition:    all var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.pwa-btn:hover              { background: var(--ink06); border-color: var(--ln3); }
.pwa-btn--android:hover     { border-color: #3ddc84; color: #3ddc84; }
.pwa-btn svg                { flex-shrink: 0; }

.pwa-modal {
  display:    none;
  position:   fixed;
  inset:      0;
  z-index:    var(--z-top);
  align-items: center;
  justify-content: center;
  padding:    20px;
}
.pwa-modal.open          { display: flex; }
.pwa-modal__backdrop     { position: absolute; inset: 0; background: rgba(0, 0, 0, .7); }
.pwa-modal__content {
  position:      relative;
  background:    var(--card);
  border:        0.5px solid var(--ln2);
  border-radius: var(--rXL);
  padding:       26px 22px;
  max-width:     360px;
  width:         90%;
  z-index:       1;
}
.pwa-modal__close {
  position:    absolute;
  top:         12px;
  right:       14px;
  background:  none;
  border:      none;
  color:       var(--ink30);
  font-size:   20px;
  line-height: 1;
  cursor:      pointer;
  padding:     4px;
  transition:  color var(--t-fast);
}
.pwa-modal__close:hover { color: var(--ink70); }
.pwa-modal__title {
  font-size:   var(--fs-h3);
  font-weight: var(--fw-medium);
  color:       var(--ink);
  margin-bottom: 18px;
  text-align:  center;
}
.pwa-modal__steps        { display: flex; flex-direction: column; gap: 14px; }
.pwa-modal__step {
  display:     flex;
  align-items: center;
  gap:         12px;
  font-size:   var(--fs-base);
  color:       var(--ink55);
  line-height: var(--lh-snug);
}
.pwa-modal__step-num {
  width:           26px;
  height:          26px;
  border-radius:   var(--rFull);
  background:      var(--gold);
  color:           var(--bg);
  font-family:     var(--mono);
  font-size:       11px;
  font-weight:     var(--fw-medium);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.pwa-modal__step-icon { color: var(--gold); flex-shrink: 0; }

/* Nasconde nav install se PWA già aperta */
body.is-pwa #nav-install-app { display: none !important; }

/* ============================================================
   12. AUTOCOMPLETE
   ============================================================ */
.autocomplete-wrap { position: relative; }

.autocomplete-list {
  position:      absolute;
  top:           calc(100% + 4px);
  left:          0;
  right:         0;
  z-index:       var(--z-dropdown);
  background:    var(--card2);
  border:        0.5px solid var(--ln2);
  border-radius: var(--rM);
  overflow:      hidden;
  box-shadow:    0 8px 24px rgba(0, 0, 0, .3);
}
.autocomplete-item {
  padding:     10px 14px;
  font-size:   var(--fs-base);
  color:       var(--ink55);
  cursor:      pointer;
  border-bottom: 0.5px solid var(--ln);
  transition:  background var(--t-fast), color var(--t-fast);
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover      { background: var(--gold-bg); color: var(--ink); }

/* ============================================================
   13. PAGINATION
   ============================================================ */
.pagination {
  display:         flex;
  gap:             3px;
  align-items:     center;
  margin-top:      14px;
  justify-content: center;
}
.page-btn {
  width:           32px;
  height:          32px;
  border:          0.5px solid var(--ln2);
  border-radius:   var(--r);
  background:      var(--card);
  font-size:       var(--fs-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  text-decoration: none;
  color:           var(--ink40);
  font-family:     var(--mono);
  transition:      all var(--t-fast);
}
.page-btn:hover         { border-color: var(--gold-ln); color: var(--gold); text-decoration: none; }
.page-btn.active        { background: var(--gold); color: var(--bg); border-color: var(--gold); }

/* ============================================================
   14. STAT CARDS (dashboard)
   ============================================================ */
.stat-cards {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:                   10px;
  margin-bottom:         20px;
}
.stat-card {
  background:    var(--card);
  border:        0.5px solid var(--ln);
  border-radius: var(--rL);
  padding:       18px;
}
.stat-card__label {
  font-family:    var(--mono);
  font-size:      8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--ink30);
  margin-bottom:  8px;
}
.stat-card__value {
  font-size:      28px;
  font-weight:    var(--fw-light);
  color:          var(--ink);
  letter-spacing: -.03em;
  line-height:    1;
}

/* ============================================================
   15. DATA TABLE (admin)
   ============================================================ */
.data-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--fs-sm);
  background:      var(--card);
  border-radius:   var(--rL);
  overflow:        hidden;
  border:          0.5px solid var(--ln);
}
.data-table th {
  font-family:    var(--mono);
  font-size:      8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--ink30);
  padding:        10px 14px;
  background:     var(--bg2);
  text-align:     left;
  border-bottom:  0.5px solid var(--ln2);
  font-weight:    var(--fw-regular);
}
.data-table td {
  padding:       10px 14px;
  border-bottom: 0.5px solid var(--ln);
  vertical-align: middle;
  color:         var(--ink55);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td       { background: var(--ink06); }

/* ============================================================
   16. AVATAR
   ============================================================ */
.avatar {
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-radius:   var(--rFull);
  background:      var(--gold-bg);
  border:          0.5px solid var(--gold-ln);
  color:           var(--gold);
  font-weight:     var(--fw-medium);
  flex-shrink:     0;
  overflow:        hidden;
}
.avatar img   { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar--xs   { width: 22px; height: 22px; font-size: 9px; }
.avatar--sm   { width: 28px; height: 28px; font-size: 11px; }
.avatar--md   { width: 36px; height: 36px; font-size: 14px; }
.avatar--lg   { width: 48px; height: 48px; font-size: 18px; }
.avatar--xl   { width: 72px; height: 72px; font-size: 26px; }

/* ============================================================
   17. EMPTY STATE
   ============================================================ */
.empty-state {
  text-align: center;
  padding:    48px 20px;
}
.empty-state__icon  { font-size: 28px; opacity: .25; margin-bottom: 12px; }
.empty-state__title {
  font-size:   var(--fs-base);
  font-weight: var(--fw-medium);
  color:       var(--ink40);
  margin-bottom: 6px;
}
.empty-state__text  { font-size: var(--fs-sm); color: var(--ink30); line-height: var(--lh-base); }

/* ============================================================
   LIGHT MODE — Component refinements
   ============================================================ */

/* Form inputs: superficie leggermente più chiara della card */
[data-theme="light"] .form-input,
[data-theme="light"] .form-select {
  background:    #FAFAF4;
  border-color:  rgba(28, 22, 8, .18);
  color:         var(--ink);
}
[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-select:focus {
  border-color: var(--gold);
  box-shadow:   0 0 0 3px rgba(138, 90, 12, .10);
}
[data-theme="light"] .form-input::placeholder { color: rgba(28, 22, 8, .28); }
[data-theme="light"] .form-input.error         { border-color: var(--terra); }

/* Card .card standalone (non in lista section 7 tokens) */
[data-theme="light"] .card { box-shadow: var(--shadow-md); }
[data-theme="light"] .card:hover { box-shadow: var(--shadow-lg); }

/* Btn primary: testo warm-white (bg è oro scuro) */
[data-theme="light"] .btn--primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--card);
}
[data-theme="light"] .btn--primary:hover {
  background: var(--gold-dim);
  border-color: var(--gold-dim);
  color: var(--card);
}

/* Btn ghost in light */
[data-theme="light"] .btn--ghost {
  border-color: rgba(28, 22, 8, .18);
  color: var(--ink55);
}
[data-theme="light"] .btn--ghost:hover {
  background: rgba(28, 22, 8, .05);
  border-color: rgba(28, 22, 8, .26);
  color: var(--ink70);
}

/* Btn google in light */
[data-theme="light"] .btn--google {
  background:   var(--card);
  border-color: rgba(28, 22, 8, .16);
  color:        var(--ink70);
}
[data-theme="light"] .btn--google:hover {
  background:   var(--card2);
  border-color: rgba(28, 22, 8, .24);
  color:        var(--ink);
}

/* Alert elevato in light */
[data-theme="light"] .alert { box-shadow: var(--shadow-sm); }

/* Modal: overlay più caldo */
[data-theme="light"] .modal-backdrop,
[data-theme="light"] .modal-overlay { background: rgba(28, 22, 8, .45); }
[data-theme="light"] .modal-card    { box-shadow: var(--shadow-lg); }

/* Notifica badge */
[data-theme="light"] .notif-badge {
  background: var(--terra);
  color: #fff;
}

/* Switch toggle in light — knob visibile */
[data-theme="light"] .theme-switch__knob { background: var(--gold); }

/* Autocomplete dropdown */
[data-theme="light"] .autocomplete-list {
  background:   var(--card);
  border-color: rgba(28, 22, 8, .14);
  box-shadow:   var(--shadow-md);
}
[data-theme="light"] .autocomplete-item:hover {
  background: rgba(28, 22, 8, .04);
}

/* Verify banner */
[data-theme="light"] .verify-banner {
  background:   var(--gold-bg);
  border-color: var(--gold-ln);
}