/* ============================================================
   PUBBLISOLUTION — DESIGN C · "MODERN VISUAL"
   tokens.css — Design tokens (namespaced: .ps-ui)
   ============================================================ */

.ps-ui {
  /* ---- Colori ---- */
  --ps-color-primary: #0B1830;        /* quasi-nero navy */
  --ps-color-primary-dark: #060D1C;
  --ps-color-accent: #2E6BFF;         /* blu elettrico vivid */
  --ps-color-accent-2: #38BDF8;       /* ciano di supporto */
  --ps-color-accent-soft: #EAF0FF;
  --ps-color-background: #F4F6FB;
  --ps-color-surface: #FFFFFF;
  --ps-color-panel: #EFF3FB;
  --ps-color-border: #E1E6F2;
  --ps-color-border-strong: #C6D0E4;
  --ps-color-text: #0C1526;
  --ps-color-muted: #5B6B8C;
  --ps-color-success: #16C784;
  --ps-color-danger: #FF4D67;
  --ps-color-warning: #F5A623;

  /* ---- Raggi (moderni, generosi) ---- */
  --ps-radius-sm: 10px;
  --ps-radius-md: 14px;
  --ps-radius-lg: 20px;

  /* ---- Spaziature ---- */
  --ps-space-1: 4px;
  --ps-space-2: 8px;
  --ps-space-3: 12px;
  --ps-space-4: 16px;
  --ps-space-5: 24px;
  --ps-space-6: 32px;
  --ps-space-7: 48px;
  --ps-space-8: 72px;

  /* ---- Ombre ---- */
  --ps-shadow-sm: 0 2px 8px rgba(10, 24, 48, .08);
  --ps-shadow-md: 0 20px 48px rgba(10, 24, 48, .16);
  --ps-shadow-lg: 0 32px 80px rgba(6, 13, 28, .28);
  --ps-glow: 0 8px 24px rgba(46, 107, 255, .35);

  /* ---- Tipografia ---- */
  --ps-font-display: 'Sora', sans-serif;
  --ps-font-body: 'Instrument Sans', sans-serif;
  --ps-font-mono: 'JetBrains Mono', monospace;
  --ps-font-script: 'Sora', sans-serif;

  /* ---- Metriche di layout ---- */
  --ps-sidebar-w: 264px;
  --ps-rail-w: 76px;
  --ps-header-h: 70px;

  /* ---- Motion ---- */
  --ps-ease: cubic-bezier(.22, .8, .24, 1);
  --ps-transition-fast: 150ms;
  --ps-transition-normal: 250ms;
  --ps-transition-slow: 400ms;
}

/* ---- Token estesi (formalizzazione Grafica C) ---- */
.ps-ui {
  /* Superficie alternativa (pannelli chiari) */
  --ps-color-surface-alt: var(--ps-color-panel);

  /* Scala tipografica */
  --ps-font-family: var(--ps-font-body);
  --ps-font-size-xs: 11px;
  --ps-font-size-sm: 13px;
  --ps-font-size-md: 15px;
  --ps-font-size-lg: 17px;
  --ps-font-size-xl: 22px;
  --ps-font-size-2xl: 30px;

  /* Raggio extra-large (hero, pannelli speciali) */
  --ps-radius-xl: 24px;

  /* Z-index di sistema */
  --ps-z-header: 60;
  --ps-z-overlay: 90;
  --ps-z-dialog: 100;
  --ps-z-toast: 120;
}