/* ==========================================================================
   ATRIO — Design tokens & base
   Prototipo App Inquilini. Palette: pino profondo + carta avorio + rame.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;600;700&family=Bebas+Neue&display=swap');

:root {
  /* Brand — verde Studio Gest (teal/salvia) */
  --pine-900: #0E2322;
  --pine-800: #153735;
  --pine-700: #1D5B59;
  --pine-600: #2A6F6C;
  --pine-500: #3E8582;
  --pine-300: #8FB5B3;
  --pine-100: #D7E8E7;
  --pine-50:  #EDF5F4;

  /* Salvia secondaria */
  --sage-700: #445D59;
  --sage-500: #6A8A83;

  /* Accento — rame caldo */
  --copper-700: #94512F;
  --copper-600: #B4613A;
  --copper-500: #D07A4B;
  --copper-200: #F0D4C1;
  --copper-100: #F8EBE1;

  /* Viola — riservato all'intelligenza artificiale (DS 2026) */
  --ai-700: #4C3A7A;
  --ai-600: #6B4FA8;
  --ai-500: #8367C4;
  --ai-200: #DCD2F0;
  --ai-100: #EFEAF8;

  /* Neutri caldi (greige) */
  --paper:    #F6F4F0;
  --paper-2:  #EDE9E3;
  --surface:  #FFFFFF;
  --ink:      #1C1A18;
  --ink-2:    #56504B;
  --ink-3:    #8A827B;
  --ink-4:    #B0A89F;
  --line:     #E2DDD5;
  --line-2:   #EFEBE4;

  /* Semantici */
  --ok:        #2E7D5B;
  --ok-bg:     #E4F2EB;
  --warn:      #B8821D;
  --warn-bg:   #FBF0D9;
  --danger:    #B23B32;
  --danger-bg: #FAE7E5;
  --info:      #2F6B8F;
  --info-bg:   #E4EFF6;

  /* Raggi */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-full: 999px;

  /* Ombre */
  --sh-1: 0 1px 2px rgba(20,28,25,.05), 0 1px 3px rgba(20,28,25,.04);
  --sh-2: 0 2px 6px rgba(20,28,25,.06), 0 8px 20px rgba(20,28,25,.05);
  --sh-3: 0 8px 18px rgba(20,28,25,.08), 0 24px 48px rgba(20,28,25,.09);
  --sh-4: 0 20px 60px rgba(14,36,30,.22);

  /* Movimento */
  --e-out: cubic-bezier(.22,1,.36,1);
  --e-in-out: cubic-bezier(.65,0,.35,1);
  --e-spring: cubic-bezier(.34,1.56,.64,1);

  --font: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Bebas Neue', 'Roboto Condensed', Impact, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--copper-500);
  outline-offset: 2px;
  border-radius: 6px;
}

::selection { background: var(--copper-200); }

/* Scrollbar discreta */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(20,28,25,.14); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(20,28,25,.26); background-clip: content-box; }

/* --- Utility condivise ------------------------------------------------- */

.u-serif { font-family: var(--font-display); font-weight: 400; letter-spacing: .015em; }
.u-mono-num { font-variant-numeric: tabular-nums; }
.u-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-hide { display: none !important; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  background: var(--pine-50); color: var(--pine-700);
  white-space: nowrap;
}
.badge--ok     { background: var(--ok-bg);     color: var(--ok); }
.badge--warn   { background: var(--warn-bg);   color: var(--warn); }
.badge--danger { background: var(--danger-bg); color: var(--danger); }
.badge--info   { background: var(--info-bg);   color: var(--info); }
.badge--muted  { background: var(--paper-2);   color: var(--ink-2); }
.badge--copper { background: var(--copper-100);color: var(--copper-700); }
.badge .dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; }

@keyframes atr-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes atr-fade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes atr-pop     { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes atr-spin    { to { transform: rotate(360deg); } }
@keyframes atr-shimmer { 100% { transform: translateX(100%); } }

.stagger > * { animation: atr-fade-up .5s var(--e-out) both; }
.stagger > *:nth-child(1) { animation-delay: .02s }
.stagger > *:nth-child(2) { animation-delay: .06s }
.stagger > *:nth-child(3) { animation-delay: .10s }
.stagger > *:nth-child(4) { animation-delay: .14s }
.stagger > *:nth-child(5) { animation-delay: .18s }
.stagger > *:nth-child(6) { animation-delay: .22s }
.stagger > *:nth-child(7) { animation-delay: .26s }
.stagger > *:nth-child(8) { animation-delay: .30s }
.stagger > *:nth-child(9) { animation-delay: .34s }
.stagger > *:nth-child(10){ animation-delay: .38s }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------- selettore di lingua */
.lang { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--paper-2, rgba(0,0,0,.06)); border: 1px solid var(--line, rgba(0,0,0,.1)); }
.lang-b {
  min-width: 34px; height: 26px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent;
  font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--ink-3, #6b7a79);
  cursor: pointer; transition: background .18s, color .18s;
}
.lang-b:hover { color: var(--ink, #1a2423); }
.lang-b.on { background: var(--surface, #fff); color: var(--pine-700, #1D5B59); box-shadow: 0 1px 2px rgba(0,0,0,.1); }

/* sul fondo scuro (indice, barra laterale dei pannelli) */
.lang--scuro { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.lang--scuro .lang-b { color: #9DB5B3; }
.lang--scuro .lang-b:hover { color: #fff; }
.lang--scuro .lang-b.on { background: rgba(255,255,255,.16); color: #fff; box-shadow: none; }

/* fissato in alto a destra della pagina */
.lang--fisso { position: fixed; top: 20px; right: 24px; z-index: 60; }
@media (max-width: 700px) { .lang--fisso { top: 12px; right: 12px; } }