/*
 * Joorna v2 — Design tokens CORE (platform-wide)
 * ------------------------------------------------------------------
 * Fonte canonica dei token cromatici/tipografici/di motion condivisi
 * da TUTTI i pannelli Filament (admin + hotel) e da tutti i moduli
 * (campagne, automazioni, modelli, config, ...), NON solo WhatsApp.
 *
 * De-scope dei token core da `whatsapp-tokens.css` (che resta la sede
 * dei token/utility WhatsApp-specifici: --jo-wa-*, --jo-channel-*,
 * classi .jo-wa-*). Questo file va caricato PRIMA di whatsapp-tokens.css
 * nei render hook HEAD_END dei due PanelProvider.
 *
 * Servito da public/css direttamente (deploy PHP-only, niente Vite/npm —
 * vedi rationale nei PanelProvider). Cache-bust su mtime.
 *
 * Brand (2026-05-13): primary #7400ff + secondary #cff601 lime restano i
 * colori brand Joorna. Surface/semantic/tipografia/radii/motion derivano
 * dal mockup (Tailwind Zinc + Inter). NON adottato il violet #8b5cf6.
 */

:root {
  /* ──────────────────────────────────────────────────────────
   * Brand — Primary (Joorna viola #7400ff)
   * ────────────────────────────────────────────────────────── */
  --jo-primary-50:  #f5edff;
  --jo-primary-100: #ead9ff;
  --jo-primary-200: #d3b3ff;
  --jo-primary-300: #b888ff;
  --jo-primary-400: #9b5dff;
  --jo-primary-500: #8536ff;
  --jo-primary-600: #7400ff;  /* BASE — CTA, link, accent */
  --jo-primary-700: #5e00d6;
  --jo-primary-800: #4900a3;
  --jo-primary-900: #340075;

  /* ──────────────────────────────────────────────────────────
   * Brand — Secondary (Joorna lime #cff601)
   * ────────────────────────────────────────────────────────── */
  --jo-secondary:        #cff601;
  --jo-secondary-bg:     #f6fcd5;
  --jo-secondary-text:   #4b5d00;
  --jo-secondary-hover:  #b9de00;

  /* ──────────────────────────────────────────────────────────
   * Surface / Neutrals (Tailwind Zinc, dal mockup)
   * ────────────────────────────────────────────────────────── */
  --jo-surface-0:   #ffffff;
  --jo-surface-50:  #fafafa;
  --jo-surface-100: #f4f4f5;
  --jo-surface-200: #e4e4e7;
  --jo-surface-300: #d4d4d8;
  --jo-surface-400: #a1a1aa;
  --jo-surface-500: #71717a;
  --jo-surface-600: #52525b;
  --jo-surface-700: #3f3f46;
  --jo-surface-800: #27272a;
  --jo-surface-900: #18181b;

  /* ──────────────────────────────────────────────────────────
   * Semantic (success / warning / danger / info)
   * ────────────────────────────────────────────────────────── */
  --jo-success:     #10b981;   /* emerald-500 */
  --jo-success-bg:  #ecfdf5;
  --jo-success-fg:  #065f46;

  --jo-warning:     #f59e0b;   /* amber-500 (token semantic custom dal mockup) */
  --jo-warning-bg:  #fffbeb;
  --jo-warning-fg:  #92400e;

  --jo-danger:      #ef4444;   /* red-500 */
  --jo-danger-bg:   #fef2f2;
  --jo-danger-fg:   #991b1b;

  --jo-info:        #3b82f6;   /* blue-500 */
  --jo-info-bg:     #eff6ff;
  --jo-info-fg:     #1e40af;

  /* ──────────────────────────────────────────────────────────
   * Typography (dal mockup — Inter)
   * ────────────────────────────────────────────────────────── */
  --jo-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --jo-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                  'Liberation Mono', 'Courier New', monospace;

  --jo-text-xs:    0.75rem;
  --jo-text-sm:    0.875rem;
  --jo-text-base:  1rem;
  --jo-text-lg:    1.125rem;
  --jo-text-xl:    1.25rem;

  /* ──────────────────────────────────────────────────────────
   * Border radius (dal mockup)
   * ────────────────────────────────────────────────────────── */
  --jo-radius-sm:  0.25rem;
  --jo-radius-md:  0.375rem;
  --jo-radius-lg:  0.5rem;
  --jo-radius-xl:  0.75rem;
  --jo-radius-2xl: 1rem;
  --jo-radius-full: 9999px;

  /* ──────────────────────────────────────────────────────────
   * Shadow (Tailwind default)
   * ────────────────────────────────────────────────────────── */
  --jo-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --jo-shadow:     0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --jo-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --jo-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --jo-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* ──────────────────────────────────────────────────────────
   * Motion (dal mockup)
   * ────────────────────────────────────────────────────────── */
  --jo-transition-duration: 0.15s;
  --jo-transition-timing:   cubic-bezier(0.4, 0, 0.2, 1);
  --jo-transition:          var(--jo-transition-duration) var(--jo-transition-timing);
}