/* ============================================================
   ACTION MARK — Design Tokens (Light)
   Estetica: chiara, minimale, professionale. Un accent disciplinato,
   palette di stato desaturata, griglia 4px, tipografia Inter.
   ============================================================ */

:root {
  /* ---- Superfici ---- */
  --bg-canvas:    #F5F7FA;   /* sfondo app */
  --bg-base:      #FFFFFF;   /* chrome: topbar / sidebar / inspector */
  --bg-surface:   #FFFFFF;   /* card */
  --bg-surface-2: #F4F6F9;   /* hover / fill leggero */
  --bg-surface-3: #ECEFF4;   /* attivo / selezionato */
  --bg-overlay:   rgba(15, 23, 42, 0.40);
  --bg-tint:      #FAFBFD;

  /* ---- Bordi ---- */
  --border:        #E5E9F0;
  --border-soft:   #EEF1F6;
  --border-strong: #D5DBE5;
  --border-accent: rgba(43, 91, 226, 0.40);

  /* ---- Testo ---- */
  --text-primary:   #101828;
  --text-secondary: #475467;
  --text-tertiary:  #8A93A6;
  --text-disabled:  #B6BECD;
  --text-on-accent: #FFFFFF;

  /* ---- Accent (blu reale raffinato) ---- */
  --accent:        #2B5BE2;
  --accent-bright: #3A6BF0;
  --accent-dim:    #1E45B8;
  --accent-soft:   rgba(43, 91, 226, 0.08);
  --accent-softer: rgba(43, 91, 226, 0.045);
  --accent-glow:   rgba(43, 91, 226, 0.16);

  /* ---- Stati / dati (toni profondi, sobri) ---- */
  --teal:        #0E9488;   /* FIX / hold posizione */
  --teal-soft:   rgba(14, 148, 136, 0.10);
  --green:       #18925C;   /* FREE / ok */
  --green-soft:  rgba(24, 146, 92, 0.10);
  --amber:       #B7791F;   /* HOLD / warning */
  --amber-soft:  rgba(183, 121, 31, 0.12);
  --red:         #D33B3B;   /* errore / critico */
  --red-soft:    rgba(211, 59, 59, 0.10);
  --violet:      #6455CE;   /* AUTO / RTL */
  --violet-soft: rgba(100, 85, 206, 0.10);
  --slate:       #7A8699;   /* offline / neutro */
  --slate-soft:  rgba(122, 134, 153, 0.10);

  /* ---- Tipografia ---- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-display: 28px;
  --fs-h1:      20px;
  --fs-h2:      16px;
  --fs-body:    14px;
  --fs-sm:      13px;
  --fs-xs:      12px;
  --fs-2xs:     11px;
  --fs-micro:   10px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* ---- Spaziatura (4px) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* ---- Raggi ---- */
  --r-sm: 6px; --r-md: 9px; --r-lg: 13px; --r-xl: 18px; --r-pill: 999px;

  /* ---- Ombre (soffuse, reali) ---- */
  --sh-sm:   0 1px 2px rgba(16, 24, 40, 0.05);
  --sh-md:   0 2px 8px rgba(16, 24, 40, 0.07), 0 1px 2px rgba(16, 24, 40, 0.04);
  --sh-lg:   0 8px 28px rgba(16, 24, 40, 0.10);
  --sh-xl:   0 20px 52px rgba(16, 24, 40, 0.16);
  --sh-focus: 0 0 0 3px var(--accent-soft);

  /* ---- Layout ---- */
  --topbar-h:    60px;
  --sidebar-w:   272px;
  --inspector-w: 340px;
  --dock-h:      244px;

  /* ---- Transizioni ---- */
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:   120ms;
  --t-base:   200ms;
  --t-slow:   320ms;
}