/**
 * tokens.css — Design Token System centralizzato Rentadomus
 *
 * Questo è il singolo source-of-truth per tutti i valori brand.
 * Importato come PRIMO <link> in ogni pagina.
 * I file CSS specifici (new-listing.css, dossier.css, ecc.) possono
 * sovrascrivere localmente, ma NON ridefinire qui.
 *
 * Struttura:
 *  1. Colori brand e palette
 *  2. Sfondi e glass effect
 *  3. Tipografia
 *  4. Border radius scale
 *  5. Spaziatura e layout
 *  6. Ombre
 *  7. Animazioni e transizioni
 *  8. Token Shoelace (mappatura su valori Rentadomus)
 *  9. Accessibilità: focus-visible globale
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. COLORI BRAND
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Accent principale — blu elettrico Rentadomus */
  --rd-accent:        #1a8cff;
  --rd-accent-hover:  #2d98ff;
  --rd-accent-active: #0d67d8;
  --rd-accent-rgb:    26, 140, 255;       /* per rgba() */
  --rd-accent-2:      #8cf5d0;            /* accent secondario (teal) */

  /* Stato */
  --rd-success:  #30d158;
  --rd-warning:  #f5c66a;
  --rd-error:    #ff453a;
  --rd-danger:   #ff6a7a;
  --rd-ok:       #5ddca7;

  /* Testo */
  --rd-text:         #e6e9f2;
  --rd-text-primary: #f0f4ff;
  --rd-text-dim:     #98a0b3;
  --rd-text-muted:   rgba(200, 220, 255, 0.55);
  --rd-text-faint:   rgba(180, 200, 240, 0.40);

  /* Bordi */
  --rd-border:        rgba(255, 255, 255, 0.08);
  --rd-border-strong: rgba(255, 255, 255, 0.16);
  --rd-glass-border:  rgba(171, 220, 255, 0.18);
  --rd-glass-border-bright: rgba(171, 220, 255, 0.30);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. SFONDI E GLASS EFFECT
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Sfondi base (dark) */
  --rd-bg-0:   #070b12;   /* profondo — pagine utente */
  --rd-bg-1:   #0a101c;
  --rd-bg-2:   #0b0e16;   /* admin panel */
  --rd-bg-3:   #11151f;   /* panel admin secondario */

  /* Glass */
  --rd-glass-bg:      linear-gradient(165deg, rgba(13,22,37,0.92), rgba(8,17,30,0.86));
  --rd-glass-panel:   rgba(22, 27, 40, 0.72);
  --rd-glass-panel-strong: rgba(28, 33, 48, 0.92);
  --rd-glass-blur:    blur(18px) saturate(140%);

  /* Gradiente hero */
  --rd-bg-hero: radial-gradient(1100px 560px at 10% 0%, rgba(56,122,210,0.34), transparent 68%),
                radial-gradient(940px 480px at 94% 10%, rgba(39,165,216,0.24), transparent 70%),
                linear-gradient(180deg, #0a101c 0%, #08111c 46%, #070b12 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. TIPOGRAFIA
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --rd-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', sans-serif;

  /* Scala fluid (clamp) */
  --rd-text-xs:   clamp(0.75rem, 0.7rem + 0.2vw, 0.82rem);
  --rd-text-sm:   clamp(0.86rem, 0.8rem + 0.22vw, 0.94rem);
  --rd-text-base: clamp(0.96rem, 0.9rem + 0.24vw, 1.02rem);
  --rd-text-md:   clamp(1rem,    0.94rem + 0.24vw, 1.06rem);
  --rd-text-lg:   clamp(1.1rem,  1rem + 0.35vw, 1.25rem);
  --rd-text-xl:   clamp(1.3rem,  1.1rem + 0.7vw, 1.6rem);
  --rd-text-2xl:  clamp(1.6rem,  1.3rem + 1.2vw, 2.1rem);
  --rd-text-hero: clamp(2rem,    1.6rem + 2vw, 3.2rem);
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. BORDER RADIUS SCALE
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --rd-radius-xs: 6px;
  --rd-radius-sm: 10px;
  --rd-radius-md: 14px;   /* admin panel, modal piccoli */
  --rd-radius-lg: 20px;
  --rd-radius-xl: 28px;   /* card wizard */
  --rd-radius-2xl: 30px;  /* card auth */
  --rd-radius-full: 999px; /* pillole, bottoni */

  --rd-radius-input:  13px;
  --rd-radius-card:   28px;
  --rd-radius-modal:  22px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. SPAZIATURA E LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --rd-gap-xs:  clamp(6px,  0.4vw, 10px);
  --rd-gap-sm:  clamp(10px, 0.7vw, 16px);
  --rd-gap-md:  clamp(14px, 1.2vw, 24px);
  --rd-gap-lg:  clamp(24px, 2vw,   40px);
  --rd-gap-xl:  clamp(40px, 4vw,   72px);

  --rd-max-content: 1320px;
  --rd-max-narrow:  860px;
  --rd-max-auth:    480px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. OMBRE
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --rd-shadow-sm:  0 4px 12px rgba(0, 0, 0, 0.28);
  --rd-shadow-md:  0 8px 28px rgba(0, 0, 0, 0.36);
  --rd-shadow-lg:  0 18px 40px rgba(0, 0, 0, 0.45);
  --rd-shadow-xl:  0 28px 72px rgba(0, 0, 0, 0.50);
  --rd-shadow-card: 0 8px 26px rgba(0, 60, 180, 0.16);

  --rd-glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20),
    0 28px 72px rgba(0, 0, 0, 0.50),
    0 8px 26px rgba(0, 60, 180, 0.16);

  --rd-btn-shadow: 0 12px 30px rgba(9, 101, 206, 0.44),
                   inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --rd-btn-shadow-hover: 0 16px 40px rgba(9, 101, 206, 0.54),
                         inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. ANIMAZIONI E TRANSIZIONI
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --rd-transition:       0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --rd-transition-fast:  0.14s ease;
  --rd-transition-slow:  0.45s cubic-bezier(0.22, 1, 0.36, 1);
  --rd-ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Animazione hero */
@keyframes rd-fade-up {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. TOKEN SHOELACE — mappatura su brand Rentadomus
   Shoelace usa queste variabili per tutti i suoi componenti (<sl-dialog>,
   <sl-alert>, <sl-tooltip>, <sl-skeleton> ecc.)
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --sl-color-primary-50:  #e8f3ff;
  --sl-color-primary-100: #c2ddff;
  --sl-color-primary-200: #97c6ff;
  --sl-color-primary-300: #64adff;
  --sl-color-primary-400: #3e99ff;
  --sl-color-primary-500: var(--rd-accent);       /* #1a8cff */
  --sl-color-primary-600: #1479e8;
  --sl-color-primary-700: #0d64cc;
  --sl-color-primary-800: #0a50ae;
  --sl-color-primary-900: #073d8f;
  --sl-color-primary-950: #042870;

  --sl-color-success-500: var(--rd-success);
  --sl-color-warning-500: var(--rd-warning);
  --sl-color-danger-500:  var(--rd-danger);

  /* Panel e bordi Shoelace */
  --sl-panel-background-color: var(--rd-glass-panel-strong);
  --sl-panel-border-color:     var(--rd-glass-border-bright);
  --sl-panel-border-radius:    var(--rd-radius-2xl);

  /* Overlay dialog */
  --sl-overlay-background-color: rgba(3, 8, 16, 0.80);

  /* Tipografia Shoelace */
  --sl-font-sans:  var(--rd-font);
  --sl-font-size-medium: var(--rd-text-base);
  --sl-input-color:            var(--rd-text-primary);
  --sl-input-background-color: rgba(255, 255, 255, 0.07);
  --sl-input-border-color:     var(--rd-glass-border-bright);
  --sl-input-border-radius-medium: var(--rd-radius-full);
  --sl-input-focus-ring-color: rgba(var(--rd-accent-rgb), 0.35);

  /* Tooltip */
  --sl-tooltip-background-color: var(--rd-glass-panel-strong);
  --sl-tooltip-color:            var(--rd-text-primary);
  --sl-tooltip-border-radius:    var(--rd-radius-sm);

  /* Skeleton */
  --sl-color-gray-100: rgba(255,255,255,0.04);
  --sl-color-gray-200: rgba(255,255,255,0.08);
  --sl-color-gray-300: rgba(255,255,255,0.12);
}

/* ── Stile backdrop del dialog tramite CSS Part ─────────────────────────────── */
sl-dialog::part(overlay) {
  backdrop-filter: blur(8px);
}
sl-dialog::part(panel) {
  background: linear-gradient(165deg, rgba(13,22,37,0.96), rgba(8,17,30,0.92));
  border: 1px solid var(--rd-glass-border-bright);
  box-shadow: var(--rd-glass-shadow);
  backdrop-filter: var(--rd-glass-blur);
  -webkit-backdrop-filter: var(--rd-glass-blur);
}
sl-dialog::part(title) {
  font-weight: 700;
  color: var(--rd-text-primary);
}

/* ── Alert/toast Shoelace ───────────────────────────────────────────────────── */
sl-alert::part(base) {
  border-radius: var(--rd-radius-lg);
  background: var(--rd-glass-panel-strong);
  border-color: var(--rd-glass-border-bright);
  color: var(--rd-text-primary);
  backdrop-filter: var(--rd-glass-blur);
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. ACCESSIBILITÀ GLOBALE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Skip link — primo elemento in ogni pagina, visibile solo con tastiera */
.rd-skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 10px 20px;
  background: var(--rd-accent);
  color: #fff;
  font-weight: 700;
  border-radius: var(--rd-radius-full);
  text-decoration: none;
  font-size: var(--rd-text-sm);
  transition: top 0.15s ease;
}
.rd-skip-link:focus {
  top: 12px;
}

/* Focus visible globale — sostituisce outline:none con un ring accessibile */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--rd-accent);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Override nei contesti glass dove il colore di focus può essere personalizzato */
.auth-card :focus-visible,
.nl-glass-card :focus-visible,
.login-form :focus-visible,
.registration-form :focus-visible {
  outline-color: rgba(132, 201, 255, 0.80);
  box-shadow: 0 0 0 3px rgba(87, 171, 255, 0.24);
}
/* I button nativi e role=button devono sempre avere focus visibile */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
select:focus-visible {
  outline: 2px solid var(--rd-accent);
  outline-offset: 3px;
  border-radius: var(--rd-radius-sm);
}

/* ── Skeleton loader CSS ────────────────────────────────────────────────────── */
.rd-skeleton-wrap {
  padding: 12px 0;
}
.rd-skeleton-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rd-border);
}
.rd-sk-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--rd-radius-full);
  flex-shrink: 0;
}
.rd-sk-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rd-sk-lines sl-skeleton { height: 14px; border-radius: var(--rd-radius-sm); }
.rd-sk-short { max-width: 55% !important; }

/* Card grid skeleton */
.rd-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 16px;
}
.rd-skeleton-card {
  border-radius: var(--rd-radius-xl);
  overflow: hidden;
  border: 1px solid var(--rd-border);
}
.rd-sk-image { width: 100%; height: 180px; display: block; }
.rd-sk-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.rd-sk-title { height: 18px; border-radius: var(--rd-radius-sm); }
.rd-sk-line  { height: 13px; border-radius: var(--rd-radius-sm); }

/* ── prefers-reduced-motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Disabilita anche i backdrop-filter pesanti su dispositivi che lo richiedono */
  .auth-card,
  .nl-glass-card,
  .nav-glass,
  [style*="backdrop-filter"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}