/*
 * Design Tokens - New Elfin Configuratore
 * ----------------------------------------
 * File caricato per primo in layout.html.
 * Centralizza colori brand, neutri, radius e ombre.
 *
 * FASE A: introduzione token con valori 1:1 a quelli storici.
 * FASE B (corrente): aggiunti --nf-navy* (secondario brand newelfin),
 *                    modernizzate le ombre (offset diagonale → diffuse soft),
 *                    rimossi token legacy "pink" (border #e2c7c7/#af9a9a).
 *
 * Naming: --nf-<categoria>-<nome>
 */

:root {
  /* ---------- Brand: arancione (accent principale) ---------- */
  --nf-orange:               #F39000;        /* accent primario brand */
  --nf-orange-soft:          #ffb347;        /* hover link footer */
  --nf-orange-bg-soft:       #fff3e0;        /* sfondo accordion expanded */
  --nf-orange-tint-15:       rgba(243, 144, 0, 0.15); /* hover row selectable */
  --nf-orange-100:           rgb(255, 228, 177); /* feature.alone */
  --nf-orange-200:           rgb(253, 212, 185); /* hover bc-family code */
  --nf-orange-amber:         #ffcd8b;        /* hover paginator legacy */
  --nf-orange-pure:          orange;         /* feature.active legacy (configurator.css) */

  /* ---------- Brand: navy (secondario newelfin.com) ---------- */
  --nf-navy:                 #003366;        /* heading principali, nav text */
  --nf-navy-soft:            #1a4d7a;        /* hover navy / link su sfondo chiaro */

  /* ---------- Neutri: testo ---------- */
  --nf-text:                 #333333;
  --nf-text-muted:           gray;
  --nf-text-on-dark:         #cccccc;

  /* ---------- Neutri: superfici ---------- */
  --nf-surface:              #ffffff;
  --nf-surface-1:            #f5f5f5;        /* tab content, panel chiaro */
  --nf-surface-2:            rgb(244, 244, 244); /* sfondo menu-family-btn, smart-search */
  --nf-surface-3:            rgb(240, 240, 240); /* sfondo selezioni / cnt-selezioni */
  --nf-surface-4:            rgb(246, 246, 246); /* row.r2, popup-container */
  --nf-surface-5:            rgb(235, 235, 235); /* group-header */
  --nf-surface-dark:         #1a1a1a;        /* footer */

  /* ---------- Neutri: bordi ---------- */
  --nf-border-soft:          #dadada;
  --nf-border-soft-2:        #dedede;        /* family-unit (configurator_test) */
  --nf-border-tab:           #ececec;
  --nf-border-row-divider:   rgb(222, 222, 222);
  --nf-border-light:         lightgray;      /* #d3d3d3 */
  --nf-border-medium:        #959595;
  --nf-border-mid-dark:      #5d5d5d;
  --nf-border-card:          #ccc;

  /* ---------- Overlay/hover ---------- */
  --nf-overlay-light:        rgba(211, 211, 211, 0.41);
  --nf-overlay-light-strong: rgba(211, 211, 211, 0.81);
  --nf-overlay-orange-soft:  rgba(238, 188, 80, 0.41);
  --nf-overlay-blue-soft:    #3498db6d;

  /* ---------- Famiglie (palette categoriale, NON brand) ---------- */
  --nf-fam-10:               rgb(158, 144, 124);
  --nf-fam-16:               rgb(135, 105, 123);
  --nf-fam-20:               rgb(124, 195, 102); /* anche 030, 032 */
  --nf-fam-40:               rgb(13, 161, 147);  /* anche 080 */
  --nf-fam-50:               rgb(219, 65, 87);
  --nf-fam-60:               rgb(0, 66, 112);

  /* ---------- Stati colorati semantici ---------- */
  --nf-success:              #4caf50;
  --nf-success-bg-soft:      lightgreen;
  --nf-danger-bg-soft:       lightcoral;

  /* ---------- Radius ---------- */
  --nf-radius-xs:            4px;
  --nf-radius-sm:            5px;
  --nf-radius-md:            6px;
  --nf-radius-lg:            8px;
  --nf-radius-xl:            10px;
  --nf-radius-2xl:           12px;

  /* ---------- Transition / motion (FASE C) ---------- */
  --nf-transition-fast:      all 0.15s ease;
  --nf-transition:           all 0.2s ease;
  --nf-transition-slow:      all 0.3s ease;
  --nf-lift-sm:              translateY(-1px);
  --nf-lift:                 translateY(-2px);

  /* ---------- Focus ring accessibile (FASE C) ---------- */
  --nf-focus-ring:           0 0 0 3px rgba(243, 144, 0, 0.35);

  /* ---------- Shadow (FASE B: ombre diffuse, look moderno) ---------- */
  --nf-shadow-card:          0 4px 12px rgba(0, 0, 0, 0.08);   /* hover su feature/menu/btn */
  --nf-shadow-overlay:       0 8px 24px rgba(0, 0, 0, 0.12);   /* lookup, smart-search dropdown */
  --nf-shadow-overlay-soft:  0 4px 14px rgba(243, 144, 0, 0.20); /* selezione attiva: alone arancio sottile */
  --nf-shadow-overlay-mid:   0 6px 18px rgba(0, 0, 0, 0.10);   /* selezione hover */
  --nf-shadow-navbar:        0px 4px 20px 0px rgba(51, 51, 51, 0.15);
  --nf-shadow-popup:         0 12px 32px rgba(0, 0, 0, 0.18);
  --nf-shadow-light:         0 0 5px 2px #ccc;
}

/* ---------- Focus ring accessibile (FASE C) ----------
 * Solo per navigazione da tastiera (focus-visible), non interferisce con il click.
 * Si applica ai principali elementi interattivi del progetto.
 */
.feature:focus-visible,
.feature-reset:focus-visible,
.btn-family-small:focus-visible,
.selezione:focus-visible,
.btn-cmd:focus-visible,
.box-evidence:focus-visible,
.page-unit:focus-visible,
.bc-family.code:focus-visible,
.navbar .nav-link:focus-visible,
.btn-outline-primary:focus-visible {
  outline: none;
  box-shadow: var(--nf-focus-ring);
}